Detailed Explanation of Vue 2 Template Compilation Process

Vue 2 transforms template syntax into a render function that produces a virtual DOM, but the official documentation lacks a detailed description of this compilation. This article explains the whole process, from project setup to the final render output.

1. Project Setup

The example uses webpack to bundle a Vue component. The project structure is:

├─package-lock.json
├─package.json
├─src
│  ├─App.vue
│  └─index.js
├─dist
│  └─main.js
├─config
│   └─webpack.config.js

App.vue

contains a simple template, script, and style:

<template>
  <div id="box">{{ count }}</div>
</template>

<script>
export default {
  data() { return { count: 0 } }
}
</script>

<style scoped>
#box { background: red; }
</style>

The webpack.config.js registers vue-loader, babel-loader and CSS loaders:

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/, loader: 'babel-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

Running npm run build produces a bundle where the original .vue file is split into three modules: template, script, and style. The template part is later turned into a render function.

2. vue‑loader Internals

vue-loader

uses vue/compiler-sfc to parse the SFC into a descriptor (AST). It then generates import statements for each part, e.g.:

import { render, staticRenderFns } from "./App.vue?vue&type=template&id=7ba5bd90&"

The descriptor shows the raw source and the extracted template, script, and style sections, which are later processed by dedicated loaders.

3. template‑loader

The template loader receives the imported template module and compiles it with vue/compiler-sfc (or vue-template-compiler for older Vue versions) into a render function:

// before compilation
<div id="box">{{ count }}</div>

// after compilation
var render = function () {
  var _vm = this, _c = _vm._self._c
  return _c('div', { attrs: { id: 'box' } }, [_vm._v(_vm._s(_vm.count))])
}
var staticRenderFns = []
export { render, staticRenderFns }

The core of this step is compiler.compileTemplate, which parses the template into an AST and then generates JavaScript code.

4. Compilation Pipeline Details

Key functions in the pipeline: parseHTML – converts the raw HTML template into an AST by handling tags, attributes, comments, and text nodes. genElement – walks the AST and produces code strings that become part of the render function. createCompileToFunctionFn – wraps the generated code with new Function to produce executable render and static render functions.

Debugging screenshots in the original article show the flow from parseHTML → genElement → compileTemplate → new Function, illustrating how each stage contributes to the final render output.

5. Summary

By understanding how vue-loader splits an SFC, how template-loader compiles the template into a render function, and how the compiler’s internal stages ( parseHTML, genElement, and createCompileToFunctionFn) work together, developers can gain deep insight into Vue 2’s template compilation and debugging process.

Reference: Vue 2 official documentation (https://v2.cn.vuejs.org/).