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/).