Skip to content

justinhelmer/universal-javascript-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:
  • 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:

Architecture Overview

screen shot 2016-08-11 at 6 06 57 pm

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