Up Vue

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 :

• Vue 3 for the Javascript framework
• Tailwind as a Front-End Utilities
• DaisyUI a Tailwind components extension
• AntDesignVue as Ui Library
• Axios for the ajax request
• VueApollo for graphql request
• I18n for the translations helpers
• Collect.js for config provider
• VueUse as Vue3 helpers
• FormBackendValidation as form helper
• DayJS as date helper
• Usefull middlewares and libs for VueX

🧐 : "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)
//}

Digging deeper

You can get full documentation or check our complete example :

• https://upvue.uptoolkit.com
• https://github.com/uptoolkit/upvue/tree/main/example

Discover the whole ecosystem of Up Toolkit

Up Vue is a part of the Up Toolkit ecosystem a set of packages and utilities for changemakers.

For more information go to :

• https://uptoolkit.com

How to contribute ?

Everyone can contribute and propose any components or post an issues, make a suggestion :

• https://github.com/uptoolkit/upvue/issues
• You can also share your package in Awesome Up

To dos :

• [x] Testing using Jest
• [x] Customising AntDesign style
• [x] Documenting code
• [x] Setting up Storybook
• [x] More typehint and typescript
• [x] Add more useful components and libs :-)

Any helps wanted !

Support us

Support us on Open Collective or buy us a Tree :

• https://opencollective.com/uptoolkit

License

MIT

This package is Treeware.

If you use it in production, then we ask that you buy the world a tree to thank us for our work.

By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.