{"id":42265,"library":"vue-compiler-sfc-plugin","title":"vue-compiler-sfc-plugin","description":"A Vue 3 SFC compilation helper that wraps @vue/compiler-sfc, providing build-time integration hooks for custom pipelines. Current stable version is 3.5.26, following Vue 3 minor releases for compatibility (e.g., 3.5.x supports Vue ^3.5.0). It re-exports key functions (parse, compileTemplate, compileScript, compileStyleAsync) from @vue/compiler-sfc. Differentiators: explicitly designed for tool authors needing separate SFC compilation outside of Vite or vue-loader; it extends the core compiler-sfc with plugin-friendly hooks.","status":"active","version":"3.5.26","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","vue3","compiler-sfc","vue-compiler-sfc-plugin"],"install":[{"cmd":"npm install vue-compiler-sfc-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vue-compiler-sfc-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-compiler-sfc-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for parsing and compiling Vue SFCs.","package":"@vue/compiler-sfc","optional":false}],"imports":[{"note":"This package re-exports from @vue/compiler-sfc; import directly from '@vue/compiler-sfc' for library code.","wrong":"const parse = require('vue-compiler-sfc-plugin').parse","symbol":"parse","correct":"import { parse } from '@vue/compiler-sfc'"},{"note":"Functions are re-exported, but direct import from @vue/compiler-sfc avoids potential wrapper issues.","wrong":"import { compileScript } from 'vue-compiler-sfc-plugin'","symbol":"compileScript","correct":"import { compileScript } from '@vue/compiler-sfc'"},{"note":"Type-only import; use the core package for type definitions.","wrong":"import { SFCDescriptor } from 'vue-compiler-sfc-plugin'","symbol":"SFCDescriptor","correct":"import type { SFCDescriptor } from '@vue/compiler-sfc'"}],"quickstart":{"code":"import { parse, compileTemplate, compileScript, compileStyleAsync } from '@vue/compiler-sfc';\n\nconst source = `\n  <template>\n    <div>Hello</div>\n  </template>\n  <script setup>\n  const msg = 'World'\n  </script>\n  <style scoped>\n  .foo { color: red; }\n  </style>\n`;\n\nconst { descriptor } = parse(source);\nif (descriptor.template) {\n  const { code } = compileTemplate({\n    source: descriptor.template.content,\n    filename: 'Example.vue',\n    id: 'data-v-xxxxxx'\n  });\n  console.log('Template code:', code);\n}\n\nif (descriptor.scriptSetup) {\n  const scriptBlock = compileScript(descriptor, { id: 'data-v-xxxxxx' });\n  console.log('Script content:', scriptBlock.content);\n}\n\nif (descriptor.styles.length) {\n  const result = await compileStyleAsync({\n    source: descriptor.styles[0].content,\n    filename: 'Example.vue',\n    id: 'data-v-xxxxxx',\n    scoped: descriptor.styles[0].scoped\n  });\n  console.log('Style code:', result.code);\n}","lang":"typescript","description":"Demonstrates parsing an SFC string and compiling template, script, and style blocks."},"warnings":[{"fix":"Use direct imports from '@vue/compiler-sfc' for all compiler functions.","message":"Import functions from '@vue/compiler-sfc', not from 'vue-compiler-sfc-plugin'. The plugin package is a thin wrapper that may not export all members.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Replace compileStyle calls with await compileStyleAsync({...}).","message":"Vue 3 removed the deprecated 'compileStyle' synchronous function; use 'compileStyleAsync' instead.","severity":"breaking","affected_versions":">=3.4.0"},{"fix":"Avoid using 'pad' in parse options.","message":"SFC parsing options like 'pad' are deprecated and will be removed in Vue 3.6.","severity":"deprecated","affected_versions":">=3.5.0"}],"env_vars":null,"search_vec":"'3':8,31 '3.5':37 '3.5.0':41 '3.5.26':28 'author':59 'build':17 'build-tim':16 'compat':35 'compil':3,10,63,76,87,91 'compiler-sfc':75,86 'compilescript':50 'compilestyleasync':51 'compiletempl':49 'core':74 'current':24 'custom':22 'design':56 'differenti':54 'e.g':36 'explicit':55 'export':45 'extend':72 'follow':29 'friend':81 'function':47 'helper':11 'hook':20,82 'integr':19 'javascript':83 'key':46 'loader':70 'minor':32 'need':60 'outsid':64 'pars':48 'pipelin':23 'plugin':5,80,93 'plugin-friend':79 'provid':15 're':44 're-export':43 'releas':33 'separ':61 'sfc':4,9,62,77,88,92 'stabl':25 'support':39 'time':18 'tool':58 'version':26 'vite':66 'vue':2,7,30,40,69,84,90 'vue-compiler-sfc-plugin':1,89 'vue-load':68 'vue/compiler-sfc':14,53 'vue3':85 'wrap':13 'x':38","created_at":"2026-06-04T18:56:25.067807+00:00","updated_at":"2026-06-04T18:56:25.067807+00:00","problems":[{"fix":"Run: npm install @vue/compiler-sfc --save-dev","cause":"@vue/compiler-sfc is a peer dependency and not installed automatically.","error":"Cannot find module '@vue/compiler-sfc' or its corresponding type declarations."},{"fix":"Use compileStyleAsync with await instead.","cause":"compileStyle was removed in Vue 3.4+ in favor of compileStyleAsync.","error":"TypeError: compileStyle is not a function"},{"fix":"Import directly from '@vue/compiler-sfc'.","cause":"The package re-exports from @vue/compiler-sfc but may have changed export patterns.","error":"The requested module 'vue-compiler-sfc-plugin' does not provide an export named 'parse'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"vue-compiler-sfc-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}