Universal-javascript-vue NPM

Universal JavaScript - Vue

A fully-isomorphic (universal) ES6/ES7 boilerplate based on Vue.js.

For a more complete framework based on similar technologies, consider Nuxt. If you are looking for something more nuts-and-bolts, and/or are interested in the additional features offered, then you came to the right place.

When to use this

Some of the possible reasons to choose this over something else:

If you want a fully-isomorphic (universal) boilerplate that isn't too abstracted, is simple to understand, and can easily and quickly be adapted to your needs (nuts-and-bolts).
If you have tried (or looked into) these, but found them too abstracted, or require too much boilerplate code:
- Electrode
- Next.js
- Vue / Nuxt
If you don't want to use React / Redux (see this comparison guide)

Features

The following features are centralized, meaning they run both client-side and server-side:

Centralized routing using vue-router, with a strong focus on code-splitting (JS+CS+HTML components)
Centralized state management using Vuex, and DOM hydration using vuex-router-sync
Centralized API interface with ready-to-go data prefetching and a built-in mock server using JSON Server.

In addition:

Full Babel support
Full Vue support
Full Hot reloading (HMR) support
Full CSS Modules support, with SASS integration
Full PostCSS integration, with cssnext and cssnano support
(optional) Full Foundation integration
(optional) Full Font Awesome integration
(optional) Full content management system (CMS) built on KeystoneJS, including API routes for authenticating and retrieving data
Webpack 2 integration, with the following chunk optimizations:
- Extracts all vendor dependencies (i.e. node_modules) into a separate chunk for better caching
- Extracts the webpack runtime and manifest into a named chunk to avoid hash changing on every build
Support for priority asset resource prefetching / preloading
Automatically inlines the CSS necessary to render the components served by each chunk
Optimized production bundling that does the following:
- Uglifies/minifies the final chunks using the babili-webpack-plugin
- Optimized CSS using cssnano
- Loads compiled CSS and javascript in parallel using the ExtractTextPlugin

Architecture Overview

A detailed Vue SSR guide can be found here.

Installation

Requires Node.js 6+

Install the Yeoman generator:

npm install -g yo
npm install -g generator-universal-javascript-vue

If using KeystoneJS, you must also install MongoDB.

Scaffold new projects using the generator:

mkdir my-project; cd my-project
yo universal-javascript-vue

Building and serving the app

# serve in dev mode, with hot reload at localhost:3000
npm run dev

# build for production
npm run build

# serve in production mode
npm start

If using KeystoneJS (yeoman generator option):

When serving in production mode, the assumption is that a mongo instance is already running, at the url specified by config/keystone.config.js:

module.exports = {
  // ...
  'mongo': 'mongodb://localhost:27017/' + pkg.name,
  // ...
};

You can also launch the a local mongo instance using:

npm run db

Simply an alias for mongod

Configuration

The following config properties (config/index.js) are recognized by the boilerplate:

module.exports = {
  title: 'Universal JavaScript - Vue',
  port: process.env.PORT || 3000,
  api: {
    base: '/api',
    mock: false
  },

  // only applicable if using Foundation (yeoman generator option)
  foundation: {
    plugins: [] // JS plugins to bundle with the client
  }
};

Additionally, the following configuration files are consumed:

config/webpack.client.config.js - used for building the client bundle (extends webpack.base.config)
config/webpack.server.config.js - used for building the server bundle (extends webpack.base.config)
config/keystone.config.js - configuration passed to KeystoneJS, if enabled
postcss.config.js - configuration past to PostCSS