Vues 
🚧 Under active development. Feedback is welcome. 🚧
The quickest way to run vuejs client side (inspired by next.js, nuxt.js and vbuild).
Introduction
Quickstart
$ yarn global add vues
$ vues init project
$ cd project
$ yarn dev
Done!!! You're now running vuejs.
Folder Structure
projectDir/||-- filters/||-- layouts/||-- stores/||-- views/
layouts
Wrap your views with layout.
stores
Vuex namespaced stores.
views
Application views.
vues.config.js (click to toggle)
title
Set the title for your application.
title: 'My App'
titleTemplate
Sets the title dynamically based on the title option in your /views vue component.
{{ title }} will be replaced by the title in your vues.config.js and {{ viewTitle }} will be replaced by the title option in your /views .vue file.
titleTemplate: '{{ title }} | {{ viewTitle }}'
srcDir
Specify the vues root folder. This is the project root by default.
srcDir:
include
Files/folders to be compiled with babel-loader.
Some node modules may require the need to be processed by babel-loader.
include: 'some-node-module'
envs
Compile selected process.env variables with webpack.
Vues will load environment variables from .env and .env.[process.env.NODE_ENV] files. If you want access to them via process.env inside your vuejs project just and them to your envs array.
envs: 'PUBLIC_KEY'You will now have access to process.env.PUBLIC_KEY inside your vuejs project.
router
Customize the vue-router.
You can completely customize vue-router using any of the options available at https://router.vuejs.org/en/. If you make the router option a function, you will be able to access the context of the router file.
{ return history: null // cordova can't handle html5 browser history routes: name: 'index' path: '/' component: // You have access to LoginView due to this being executed in the context of the router file. name: 'logout' path: '/logout' component: LoginView // You even have the option to use the routers beforeEach method. { // some code } }
store
Customize the vuex store.
Just like the router you can use this to completely customize vuex. It may also be turned into a function, which will the get executed in the context of the store.js file.
store: plugins:
polyfills
Add selected polyfills to support older browsers.
We use core-js under the hood, the following are used by default:
polyfills: 'promise' 'array/includes' 'string/includes' 'object/entries'
babel
Customize your applications babel config.
Default babel config used:
babel: presets: 'vue-app'
meta
Inject meta tags into your index.html.
meta: name: 'mobile-web-app-capable' content: 'yes'