Grunt-vue-template-compiler NPM

grunt-vue-template-compiler

This task runs the vue-template-validator, vue-template-compiler and then vue-template-es2015-compiler on Vue HTML files to produce the pre-compile JS functions. These functions can then be substituted for import: template from ./template.html!text in the JS files and builder will then merge these into the build.js file, avoiding the need to compile the HTML files at run time.

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-vue-template-compiler --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-vue-template-compiler');

The "vue_template_compiler" task

Overview

In your project's Gruntfile, add a section named vue_template_compiler to the data object passed into grunt.initConfig().

grunt.initConfig({
  vue_template_compiler: {
    options: {
      validate: true, //default is true
      validateOnly: false, //default is false
      es2015: true //default is true
    },
    your_target: {
      files : {
        'app/js/**/*.js' : 'app/js/**/template.html' //note that JS files will be named output as render.js
      }
    },
  },
});

Options

options.validate

Type: Boolean Default value: true

This option tells the task to run the html files through the vue-template-validator.

options.validateOnly

Type: Boolean Default value: false

This option tells the task to run the html files through vue-template-validator only and not run the compile steps.

options.es2015

Type: Boolean Default value: true

This option tells the task to take the complied HTML files and run them through vue-template-es2015-compiler to take advantage of es2015 features and, more importantly, remove the with(this) inside the render function to make it strict compliant.

Notes on Usage

Once the render.js files have been created you'll need to use a grunt task like grunt-string-replace to find import statements for the html files and replace them with render.js.

You'll also be able to replace vue.min.js with vue.runtime.min.js in production.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.