@vue/compiler-sfc

Parsing Single File Components

This feature allows you to parse Vue SFCs into an object descriptor that contains the structure of the component, including its template, script, and styles.

const { parse } = require('@vue/compiler-sfc');
const { descriptor } = parse('<template><div>Hello World</div></template>');

Compiling Template to Render Function

This feature compiles the template part of a Vue SFC into a JavaScript render function, which can be used by Vue to render the component.

const { compileTemplate } = require('@vue/compiler-sfc');
const { code } = compileTemplate({ source: '<div>{{ message }}</div>', filename: 'example.vue' });

Handling Scoped CSS

This feature processes the style part of a Vue SFC, adding scoping attributes to the styles to ensure they only apply to the current component.

const { compileStyle } = require('@vue/compiler-sfc');
const { code } = compileStyle({ source: '.example { color: red; }', filename: 'example.vue', scoped: true });

Extracting Custom Blocks

This feature allows you to extract custom blocks from a Vue SFC, which can be used for documentation, testing, or other purposes.

const { parse } = require('@vue/compiler-sfc');
const { descriptor } = parse('<custom-block>Some content</custom-block>');
const customBlockContent = descriptor.customBlocks[0].content;