Registry /
devops / vue-compiler-sfc-plugin
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
parse
✓ import { parse } from '@vue/compiler-sfc'
✗ const parse = require('vue-compiler-sfc-plugin').parse
This package re-exports from @vue/compiler-sfc; import directly from '@vue/compiler-sfc' for library code.
compileScript
✓ import { compileScript } from '@vue/compiler-sfc'
✗ import { compileScript } from 'vue-compiler-sfc-plugin'
Functions are re-exported, but direct import from @vue/compiler-sfc avoids potential wrapper issues.
SFCDescriptor
✓ import type { SFCDescriptor } from '@vue/compiler-sfc'
✗ import { SFCDescriptor } from 'vue-compiler-sfc-plugin'
Type-only import; use the core package for type definitions.
Demonstrates parsing an SFC string and compiling template, script, and style blocks.
import { parse, compileTemplate, compileScript, compileStyleAsync } from '@vue/compiler-sfc';
const source = `
<template>
<div>Hello</div>
</template>
<script setup>
const msg = 'World'
</script>
<style scoped>
.foo { color: red; }
</style>
`;
const { descriptor } = parse(source);
if (descriptor.template) {
const { code } = compileTemplate({
source: descriptor.template.content,
filename: 'Example.vue',
id: 'data-v-xxxxxx'
});
console.log('Template code:', code);
}
if (descriptor.scriptSetup) {
const scriptBlock = compileScript(descriptor, { id: 'data-v-xxxxxx' });
console.log('Script content:', scriptBlock.content);
}
if (descriptor.styles.length) {
const result = await compileStyleAsync({
source: descriptor.styles[0].content,
filename: 'Example.vue',
id: 'data-v-xxxxxx',
scoped: descriptor.styles[0].scoped
});
console.log('Style code:', result.code);
}
Errors
Common errors & fixes
Cannot find module '@vue/compiler-sfc' or its corresponding type declarations.
@vue/compiler-sfc is a peer dependency and not installed automatically.
fixRun: npm install @vue/compiler-sfc --save-dev
TypeError: compileStyle is not a function
compileStyle was removed in Vue 3.4+ in favor of compileStyleAsync.
fixUse compileStyleAsync with await instead.
The requested module 'vue-compiler-sfc-plugin' does not provide an export named 'parse'
The package re-exports from @vue/compiler-sfc but may have changed export patterns.
fixImport directly from '@vue/compiler-sfc'.
Audit
Dependencies
@vue/compiler-sfcrequiredCore dependency for parsing and compiling Vue SFCs.