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
```javascript
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.
```javascript
{
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.
```javascript
{
titleTemplate: '{{ title }} | {{ viewTitle }}'
}
```
srcDir
Specify the vues root folder. This is the project root by default.
```javascript
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`.
```javascript
{
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.
```javascript
{
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.
```javascript
{
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.
```javascript
{
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:
```javascript
{
polyfills: ['promise', 'array/includes', 'string/includes', 'object/entries']
}
```
babel
Customize your applications babel config.
Default babel config used:
```javascript
{
babel: {
presets: ['vue-app']
}
}
```
meta
Inject meta tags into your index.html.
```javascript
{
meta: [
{ name: 'mobile-web-app-capable', content: 'yes' }
]
}
```
[vuejs]: https://vuejs.org/
[vue-router]: https://router.vuejs.org/en/
[vuex]: https://vuex.vuejs.org/en/
[nuxt.js]: https://github.com/nuxt/nuxt.js
[next.js]: https://github.com/zeit/next.js
[vbuild]: https://github.com/egoist/vbuild
[core-js]: https://github.com/zloirock/core-js/
[router]: #config__router