An Introduction to Vue Template Compiler
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;