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.
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)
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
- Extracts all vendor dependencies (i.e.
- 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
A detailed Vue SSR guide can be found here.
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
# 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
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 (extendswebpack.base.config
)config/webpack.server.config.js
- used for building the server bundle (extendswebpack.base.config
)config/keystone.config.js
- configuration passed to KeystoneJS, if enabledpostcss.config.js
- configuration past to PostCSS
MIT