@vue/compiler-sfc 3.3.4

The @vue/compiler-sfc package is a set of lower-level utilities for compiling Vue Single File Components (SFCs) into JavaScript. Its primary purpose is to facilitate the creation of plugins or transformations for a bundler or module system. Integral to several popular development tools, including vue-loader, rollup-plugin-vue and vite, @vue/compiler-sfc takes care of separate hot-module replacements for scripts, templates, and styles, each bearing unique considerations.

In order to use @vue/compiler-sfc, you have to import it from the main Vue package. However, you are not required to explicitly install it, as it is included as a dependency of the main Vue package. The typical usage involves using various APIs to parse, compile, and manage the different parts of your Vue SFCs.

Here's a basic example:

// Importing the necessary functions from the @vue/compiler-sfc
import { parse, compileScript, compileTemplate, compileStyle } from 'vue/compiler-sfc'

// Defining the source code of a Vue SFC
const sourceCode = '...'

// Parsing the SFC into a descriptor
const descriptor = parse(sourceCode)

// Compiling the different parts of the SFC
const script = compileScript(descriptor)
const template = compileTemplate(descriptor)
const style = compileStyle(descriptor)

// Now `script`, `template` and `style` hold the compiled code and other useful information

Kindly note that the sourceCode string should hold the actual text content of a .vue file.

The documentation for @vue/compiler-sfc is embedded in the source code as TypeScript type definitions. For more practical guidance on how to use the APIs available in @vue/compiler-sfc, developers can refer to the source code of rollup-plugin-vue or vue-loader. The explanation of the high-level workflow in the readme also provides valuable directions on using the package effectively.