Upvue NPM | npm.io

Up Vue

npm

Up to date plugins wrapper to have everything you need to start your awesome web app.

Why ?

🥸 : Bootstrapping a project is unexpectedly very difficult because there are so many choices, too many setups and configs to do before just working on a project...

😩 : "Hell yeah, you're right. Javascript fatigue..."

🥸 : Up Vue help you to have everything you need to start for creating a webapp as simple as that :

🧐 : "Mmh, interesting..."

🥸 : At the best, you can just use our components or layouts making a breeze for your quick prototyping or web development with everything to start included.

🧐 : "Mmh, yes but what if I want to..."

🥸 : Shut ! I know your dev syndrom... At the minimum, you will have a good boilerplate and UP to you to override it when you will feel the need. Thanks to our "convention over configuration philosophy" and S.O.L.I.D principle we try to keep it neat with the more used tools but allow you to remove it or replace it. :-).

😁 : "Ok now I want to start !!!"

Getting started

In your Vue project just make :

yarn add upvue #or npm i upvue --save

Then in your main app, do :

import {createApp} from 'vue'
import {UpVue} from "upvue"
import router from "./routes"
import store from "./store"
import App from './App.vue'

import 'upui-vue/dist/index.css' // optionnal
import './index.css' // import tailwind base see: https://tailwindcss.com/

createApp(App)
  /**
   * 1. One base config to setup them all, this is the philosophy
   */
  .use(UpVue, {
    project: {
      name: 'Up Toolkit Demo',
      logo: {
        src: '/img/logo.svg',
      },
      url: '/'
    },
    storeMode: 'reactive', // could be reactive or vuex
    // store: store, // if vuex you must define vuex store
    api: {
      url: '/api', // Replace with your api endpoint
      //client: axiosInstance, // Replace with your axios instance if needed
    },
    graphql: {
      url: 'https://api.mocki.io/v2/c4d7a195/graphql', // Replace with your graphql Api URL using default configuration
      //client: apolloClient, // you can also override with your own apolloClient instance @see https://v4.apollo.vuejs.org/guide-option/setup.html#_2-create-the-apollo-client
    },
    translations: {
      en_EN: {
        hello: 'Hello World !',
      },
      fr_FR: {
        hello: 'Bonjour le monde',
      },
    },
    locale: 'en_EN',
    locales: [
      'en_EN', 'fr_FR'
    ],
    //exclude: [
    // 'antd' //-> if you don't want to include the Antd Design Ui Kit
    //],
    //override: {
    // 'i18n' //-> if you want to override a package (just make sure that you implement the interface)
    //}
  })
  .use(store) // Store for demo purpose
  .use(router) // Routing For Demo purpose
  .mount('#app');

Accessing to helpers using useUp in your Composition Api

In your component you can do :

<script setup>
import {useUp} from 'upvue'
const {
  api,
  http,
  config,
  message,
  notification,
  form,
  formApi,
  i18n,
  store,
} = useUp()
</script>

Accessing to helpers using Inject methods

In your main Layout App.vue, you can do :

<template>
  <UpLayout>
    <router-view></router-view>
  </UpLayout>
</template>

<script>
import {inject} from "vue";
import {UpLayout} from "upvue";

export default {
  name: 'App',
  components: {
      UpLayout
  },
  setup(){
      const inject('config'); // collectjs helper exemple config.get('project.name')
      const inject('http'); // axios ajax helper
      const inject('api');  // axios ajax helper with your baseUrl Api as base
      const inject('i18n'); // i18n helper
      const inject('store'); // store helper
      const inject('form');  // form helper 
      const inject('formApi'); // form helper with your api endpoint as base
      const inject('message'); // message helper with your api endpoint as base
      const inject('notification'); // notification helper with your api endpoint as base
      const inject('t'); // i18n helper similar to __ from laravel
      const inject('choice'); // i18n helper similar to __ from laravel
    }
}
</script>

What's the difference between inject and useUp() ?

This is mainly a design pattern UP to you :-). With inject you can abstract the injection and replace the helper with the one you want and import UpVue in one place but with useUp() you can also simply change the useUp import by a search and replace.

What if I want to remove or override things ?

As being said, we use a S.O.L.I.D principle so if you want to override or explude components, just do :

//exclude: [
// 'antd' //-> if you don't want to include the Antd Design Ui Kit
//],
//override: {
// 'i18n' //-> if you want to override a package (just make sure that you implement the same typed interface)
//}