cj/vues

The quickest way to run vuejs client or server side (inspired by next.js and nuxt.js).

Users starred: 7
Users forked: 1
Users watching: 7
Updated at: 2017-08-18 12:56:51

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/

filters

Global vuejs filters.

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.

import { resolve } from 'path'

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

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.

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

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

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