0.2.0 • Public • Published

neutrino-preset-vue-static AppVeyor npm

A minimalistic starter kit for building static sites using Vue.js (powered by Neutrino).
Node.js 6+.


  • zero upfront configuration;
  • lightweight (only vue is included by default (add vue-document, vue-router, vuex, etc. when you actually need them))*;
  • pre-rendering (not SSR) (which means you can serve your app with whatever you want, be it nginx, caddy or one of the options linked in deployment);
  • ES2015+ (either babel-loader or buble-loader must be present) (both *.vue and *.js are transpiled);
  • Hot Module Replacement (you can turn it off by adding "neutrino":{"options":{"vue-static":{"hmr": false}}} to the package.json if you don't need it);
  • code splitting, css extraction, minification, cache-busting & source maps out of the box.

* A sample project with vue-document included is located in test/fixture/sample-project, vue-document & vue-router - test/fixture/sample-project-with-vue-router.

Getting Started

npm init -y
npm install --save-dev neutrino neutrino-preset-vue-static vue

npm install --save-dev babel-core babel-loader babel-preset-es2015
echo '{"presets": [["es2015", {"modules": false}]]}' > .babelrc
# or
npm install --save-dev buble-loader

Update package.json to include:

  "scripts": {
    "start": "neutrino start --use neutrino-preset-vue-static",
    "build": "neutrino build --use neutrino-preset-vue-static"

If you don't install babel-loader or buble-loader and yet you want minification to work with ES2015 code you'll need to npm install --save-dev neutrino-middleware-minify (which is using babili instead of uglifyjs). neutrino-preset-vue-static will take it from there.

Create src/index.vue:

  <div id="app">
    {{ message }}
  export default {
    data: {
      message: 'Hello Vue!'
  #app {
    background: #ffeb3b;

You can put your assets (favicon, custom 404 html page, images, fonts, etc) inside the ./public directory. They will be automatically copied to the ./build during the build.

That's it.
To start a dev server - execute npm start.

✔ Development server running on: http://localhost:5000
✔ Build completed

Use npm run build to get a production build (by default output goes to ./build directory (controlled by neutrino.options.output option)).

✔ Building project completed
Hash: 2dfc67b45f589e801243
Version: webpack 2.4.1
Time: 2695ms
                     Asset       Size  Chunks             Chunk Names
     index.bd21af09bea3.js  787 bytes       0  [emitted]  index
    vendor.c7864a2413ce.js      61 kB       1  [emitted]  vendor
    index.4232d91e4a58.css   24 bytes       0  [emitted]  index    6.45 kB       0  [emitted]  index  266 bytes       0  [emitted]  index     516 kB       1  [emitted]  vendor
                index.html  413 bytes          [emitted]  


By default neutrino-preset-vue-static is going to generate html page for src/index.vue only (this can be changed by modifying neutrino.options.source (default value - "src") and neutrino.options.vue-static.sourceGlob ("index.vue") config options in your package.json). If you are building an app where each vue file represents a separate page (e.g. blog) - you might want to change the value of neutrino.options.vue-static.sourceGlob to something like "**/*.vue" or ["index.vue", "about.vue"].

Below are the configuration options specific to neutrino-preset-vue-static:


  "neutrino": {
    "options": {
      "vue-static": {
        // glob used to locate pages (relative to neutrino.options.source)
        "sourceGlob": ["index.vue"],        

        // directory containing static files (404.html, favicon.ico, etc.) 
        "staticSource": "public",

        // by default each page gets written as <page>/index.html (e.g.
        //   404.vue -> 404/index.html,
        //   posts/post-2017-01-26.vue -> posts/post-2017-01-26/index.html
        // ). This behavior can be overwritten with {
        //   "404": [{path: "/", output: "404.html"}],
        //   "posts/post-2017-01-26": [
        //      {path: "/", output: "posts/post-2017-01-26.html"}
        //   ]
        // }
        "routes": {},
        // path to a file that should be used as a template to generate pages 
        "pageTemplate": "page-template.html",
        // a placeholder for pre-rendered html (value must be present in pageTemplate)
        "injectionPlaceholder": "<div id=\"app\"></div>",
        // client-side entry
        "clientEntryTemplate": "entry-client.js",
        // server-side entry (for vue-server-renderer)
        "serverEntryTemplate": "entry-server.js",

        // name of the bundle that will contain 3rd party dependencies (like vue)          
        "vendorBundle": "vendor",
        // set this option to false if you need to compile Vue.js templates on the fly 
        "runtimeOnly": true,
        // set it to false if you don't need the Source Maps
        "emitSourceMapsOnBuild": true

For more information see


All of options described in create-react-app's deployment section apply here too, including web server of your choice (static or not), Azure, Firebase, GitHub Pages, GitLab Pages, Heroku, Netlify, Now, S3, Surge, etc.



Package Sidebar


npm i neutrino-preset-vue-static

Weekly Downloads






Last publish


  • shyiko