An Introduction to Vue Template Compiler

May 31, 2019

The vue-template-compiler module is a powerful tool for compiling Vue templates and single file components into JavaScript. Most developers don't use vue-template-compiler directly. But bundler tools like vue-loader for Webpack use vue-template-compiler to do the heavy lifting of actually compiling .vue files.

The vue-template-compiler has two primary functions: converting templates to render() functions and parsing single file componens.

Compile Template to Render Function

A Vue template is just a plain string. Vue-template-compiler's compile() function converts a template string that you can use as a render() function for your components.

const compiler = require('vue-template-compiler');
const { renderToString } = require('vue-server-renderer').createRenderer();

// Compile a `render()` function based on a string template
const { render } = compiler.compileToFunctions('<h1>Hello, {{message}}</h1>');

Vue.component('hello', {
  props: ['message'],
  render
});

const app = new Vue({
  template: '<hello message="World"></hello>'
});

// <h1 data-server-rendered="true">Hello, World</h1>
const data = await renderToString(app);

Parsing a .vue File

Vue-template-compiler has a separate function called parseComponent() that helps you compile single file components (.vue files) into JavaScript.

const compiler = require('vue-template-compiler');
const parsed = compiler.parseComponent(`
  <template>
    <h1>{{message}}</h1>
  </template>
  <script>
    module.exports = {
      data: () => ({ message: 'Hello World' })
    };
  </script>
`);

// Contains `template`, `data` properties
const appComponent = Object.assign({ template: parsed.template.content },
  eval(parsed.script.content));
Vue.component('app', appComponent);
const app = new Vue({
  template: '<app></app>'
});

const data = await renderToString(app);
// <h1 data-server-rendered="true">Hello World</h1>
data;

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!