vues v0.5.20

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/

vues.config.js (click to toggle)

{
  title: 'My App'
}

{{ 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 }}'
}

import { resolve } from 'path'

{
  srcDir: resolve('./src')
}

Some node modules may require the need to be processed by babel-loader.

{
  include: ['some-node-module']
}

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.

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.

{
  router () {
    return {
      history: null, // cordova can't handle html5 browser history
      routes: [
        { name: 'index', path: '/', component: require('~/views/login') },
        // 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.
      beforeEach (to, from, next) {
        // some code
      }
    }
  }
}

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: [require('vuex-persistedstate')]
  }
}

We use core-js under the hood, the following are used by default:

{
  polyfills: ['promise', 'array/includes', 'string/includes', 'object/entries']
}

Default babel config used:

{
  babel: {
    presets: ['vue-app']
  }
}

{
  meta: [
    { name: 'mobile-web-app-capable', content: 'yes' }
  ]
}