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

License

MIT