node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org ¬Ľ

vues

Vues

ūüöß 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).

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