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


🚧 Under active development. Feedback is welcome. 🚧

Build Status Coverage Status Downloads Gitter License

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



$ yarn global add vues
$ vues init project
$ cd project
$ yarn dev

Done!!! You're now running vuejs.

Folder Structure

|-- filters/
|-- layouts/
|-- stores/
|-- views/

Global vuejs filters.


Wrap your views with layout.


Vuex namespaced stores.


Application views.

vues.config.js (click to toggle)


Set the title for your application.

  title: 'My App'

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

Specify the vues root folder. This is the project root by default.

import { resolve } from 'path'

  srcDir: resolve('./src')

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

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.


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

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

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

Customize your applications babel config.

Default babel config used:

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

Inject meta tags into your index.html.

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