@vue/compiler-core

Parsing Template Syntax

This feature allows you to parse Vue template syntax into an Abstract Syntax Tree (AST). The AST can then be manipulated or compiled into render functions.

import { baseParse } from '@vue/compiler-core';
const ast = baseParse('<div>Hello, {{ world }}</div>');

Compiling AST to Render Functions

This feature takes an AST and compiles it into JavaScript render functions, which can be used to render Vue components.

import { baseCompile } from '@vue/compiler-core';
const { code } = baseCompile('<div>Hello, {{ world }}</div>');

Transforming AST Nodes

This feature allows you to apply custom transformations to AST nodes. In this example, we're changing the content of an interpolation from 'world' to 'universe'.

import { transform } from '@vue/compiler-core';
import { createSimpleExpression } from '@vue/compiler-core';

const ast = baseParse('<div>Hello, {{ world }}</div>');
transform(ast, {
  nodeTransforms: [
    (node) => {
      if (node.type === 5 /* INTERPOLATION */) {
        node.content = createSimpleExpression('universe', false);
      }
    }
  ]
});