Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cj/vues
The quickest way to run vuejs client or server side (inspired by next.js and nuxt.js).
https://github.com/cj/vues
build client vue vuejs vuejs2 vues vuex webpack
Last synced: about 1 month ago
JSON representation
The quickest way to run vuejs client or server side (inspired by next.js and nuxt.js).
- Host: GitHub
- URL: https://github.com/cj/vues
- Owner: cj
- License: mit
- Created: 2016-12-10T06:57:50.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-16T23:28:05.000Z (over 7 years ago)
- Last Synced: 2024-10-01T17:08:23.084Z (about 1 month ago)
- Topics: build, client, vue, vuejs, vuejs2, vues, vuex, webpack
- Language: JavaScript
- Homepage:
- Size: 148 KB
- Stars: 6
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
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/
```
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.
```javascript
{
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.
```javascript
{
titleTemplate: '{{ title }} | {{ viewTitle }}'
}
```
Specify the vues root folder. This is the project root by default.
```javascript
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`.
```javascript
{
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.
```javascript
{
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.
```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
}
}
}
}
```
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')]
}
}
```
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']
}
```
Customize your applications babel config.
Default babel config used:
```javascript
{
babel: {
presets: ['vue-app']
}
}
```
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