# vues

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

Latest version **0.5.20** (published 2017-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vues
pnpm add vues
yarn add vues
bun add vues
```

Provides the commands `vues`, `vues-dev`, `vues-init`, `vues-build`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.20 |
| Published | 2017-05-24 |
| First published | 2016-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 56 |
| Known vulnerabilities | 0 (+8 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | cj |
| Maintainers | ceej |
| Keywords | vues, vues.js, vuesjs, vue, vue.js, vuejs, webpack, client, build |

## Links

- npm: https://www.npmjs.com/package/vues
- Repository: https://github.com/cj/vues
- Homepage: https://github.com/cj/vues#readme
- Issues: https://github.com/cj/vues/issues
- npm.io page: https://npm.io/package/vues

## Dependencies (56)

- [ora](https://npm.io/package/ora.md) ^1.2.0
- [vue](https://npm.io/package/vue.md) ^2.3.3
- [glob](https://npm.io/package/glob.md) ^7.1.2
- [less](https://npm.io/package/less.md) ^2.7.2
- [vuex](https://npm.io/package/vuex.md) ^2.3.1
- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [micro](https://npm.io/package/micro.md) ^7.3.3
- [dotenv](https://npm.io/package/dotenv.md) ^4.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [stylus](https://npm.io/package/stylus.md) ^0.54.5
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [webpack](https://npm.io/package/webpack.md) 2.6.0
- [chokidar](https://npm.io/package/chokidar.md) ^1.7.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^3.0.1
- [commander](https://npm.io/package/commander.md) ^2.9.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.5.3
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.2
- [vue-loader](https://npm.io/package/vue-loader.md) ^12.1.0
- [vue-router](https://npm.io/package/vue-router.md) ^2.5.3
- [compression](https://npm.io/package/compression.md) ^1.6.2
- [file-loader](https://npm.io/package/file-loader.md) ^0.11.1
- [json-loader](https://npm.io/package/json-loader.md) ^0.5.4
- [less-loader](https://npm.io/package/less-loader.md) ^4.0.3
- [querystring](https://npm.io/package/querystring.md) ^0.2.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.5
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^7.1.1
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) 1.1.0
- [query-string](https://npm.io/package/query-string.md) ^4.3.4
- [style-loader](https://npm.io/package/style-loader.md) ^0.18.1
- [yarn-install](https://npm.io/package/yarn-install.md) ^0.3.0
- [stylus-loader](https://npm.io/package/stylus-loader.md) ^3.0.1
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.1.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.23.0
- [babel-register](https://npm.io/package/babel-register.md) ^6.24.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.0.5
- [promise-polyfill](https://npm.io/package/promise-polyfill.md) ^6.0.2
- [vuex-router-sync](https://npm.io/package/vuex-router-sync.md) ^4.1.2
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [babel-preset-es2016](https://npm.io/package/babel-preset-es2016.md) ^6.24.1
- [babel-preset-es2017](https://npm.io/package/babel-preset-es2017.md) ^6.24.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.28.0
- [babel-preset-vue-app](https://npm.io/package/babel-preset-vue-app.md) ^1.2.0
- [event-source-polyfill](https://npm.io/package/event-source-polyfill.md) ^0.0.9
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.3.3
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) 1.10.2
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) 2.18.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^0.4.3
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) ^1.1.0
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^0.4.0
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 2.1.0
- [post-compile-webpack-plugin](https://npm.io/package/post-compile-webpack-plugin.md) ^0.1.1
- [babel-plugin-module-resolver](https://npm.io/package/babel-plugin-module-resolver.md) ^2.7.1
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0
- [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^0.2.1
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^1.3.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.5.20 (latest) — 2017-05-24
- 0.5.19 — 2017-05-24
- 0.5.18 — 2017-05-03
- 0.5.17 — 2017-04-20
- 0.5.16 — 2017-04-16
- 0.5.15 — 2017-04-16
- 0.5.14 — 2017-04-16
- 0.5.13 — 2017-04-15
- 0.5.12 — 2017-04-15
- 0.5.11 — 2017-04-12
- 0.5.10 — 2017-04-11
- 0.5.9 — 2017-04-10
- 0.5.8 — 2017-03-30
- 0.5.7 — 2017-03-27
- 0.5.6 — 2017-03-27
- … 28 more at https://npm.io/package/vues/versions

## README

<h1 align="center">Vues <img src='https://raw.githubusercontent.com/xpepermint/vue-webpack/master/logo.png' height='20px' /></h1>

<p style='color: #A61717;' align="center">🚧 <i><b>Under active development.  Feedback is welcome.</b></i> 🚧</p>

<p align="center">
  <a href="https://travis-ci.org/cj/vues"><img src="https://img.shields.io/travis/cj/vues/master.svg" alt="Build Status" target="_blank"></a>
  <a href="https://coveralls.io/github/cj/vues?branch=master"><img src="https://img.shields.io/coveralls/cj/vues/master.svg" alt="Coverage Status" target="_blank"></a>
  <a href="https://www.npmjs.com/package/vues"><img src="https://img.shields.io/npm/dt/vues.svg" alt="Downloads" target="_blank"></a>
  <a href="https://gitter.im/cj/vues"><img src="https://img.shields.io/badge/GITTER-join%20chat-green.svg" alt="Gitter" target="_blank"></a>
  <a href="https://github.com/cj/vues/blob/master/LICENSE.md"><img src="https://img.shields.io/npm/l/vues.svg" alt="License" target="_blank"></a>
</p>

> 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/
```

<details>
<summary>
  <a href='#folder__filters'><b>filters</b></a>
  <p>Global <a href='https://vuejs.org/'>vuejs</a> filters.</p>
</summary>
</details>

<details>
<summary>
  <a href='#folder__layouts'><b>layouts</b></a>
  <p>Wrap your views with layout.</p>
</summary>
</details>

<details>
<summary>
  <a href='#folder__stores'><b>stores</b></a>
  <p>Vuex namespaced stores.</p>
</summary>
</details>

<details>
<summary>
  <a href='#folder__views'><b>views</b></a>
  <p>Application views.</p>
</summary>
</details>

## vues.config.js (click to toggle)

<details>
<summary>
  <a href='#config__title'><b>title</b></a>
  <p>Set the title for your application.</p>
</summary>

```javascript
{
  title: 'My App'
}
```
</details>

<details>
<summary>
  <a href='#config__title-template'><b>titleTemplate</b></a>
  <p>Sets the title dynamically based on the title option in your /views vue component.</p>
</summary>

`{{ 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 }}'
}
```
</details>

<details>
<summary>
  <a href='#config_src-dir'><b>srcDir</b></a>
  <p>Specify the vues root folder.  This is the project root by default.</p>
</summary>

```javascript
import { resolve } from 'path'

{
  srcDir: resolve('./src')
}
```
</details>

<details>
<summary>
  <a href='#config__include'><b>include</b></a>
  <p>Files/folders to be compiled with babel-loader.</p>
</summary>

Some node modules may require the need to be processed by `babel-loader`.

```javascript
{
  include: ['some-node-module']
}
```
</details>

<details>
<summary>
  <a href='#config__envs'><b>envs</b></a>
  <p>Compile selected process.env variables with webpack.</p>
</summary>

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.
</details>

<details>
<summary>
  <a href='#config__router'><b>router</b></a>
  <p>Customize the vue-router.</p>
</summary>

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
      }
    }
  }
}
```
</details>

<details>
<summary>
  <a href='#config__store'><b>store</b></a>
  <p>Customize the vuex store.</p>
</summary>

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')]
  }
}
```
</details>

<details>
<summary>
  <a href='#config__polyfills'><b>polyfills</b></a>
  <p>Add selected polyfills to support older browsers.</p>
</summary>

We use [core-js] under the hood, the following are used by default:

```javascript
{
  polyfills: ['promise', 'array/includes', 'string/includes', 'object/entries']
}
```
</details>

<details>
<summary>
  <a href='#config__babel'><b>babel</b></a>
  <p>Customize your applications babel config.</p>
</summary>

Default babel config used:

```javascript
{
  babel: {
    presets: ['vue-app']
  }
}
```
</details>

<details>
<summary>
  <a href='#config__meta'><b>meta</b></a>
  <p>Inject meta tags into your index.html.</p>
</summary>

```javascript
{
  meta: [
    { name: 'mobile-web-app-capable', content: 'yes' }
  ]
}
```
</details>

[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

---
_Source: https://npm.io/package/vues · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._