• Version 3.3.11
  • Published
  • 2.24 MB
  • 10 dependencies
  • MIT license


npm i @vue/compiler-sfc
yarn add @vue/compiler-sfc
pnpm add @vue/compiler-sfc








Type Aliases


variable parseCache

const parseCache: Map<string, SFCParseResult>;

    variable version

    const version: string;

      variable walk

      const walk: any;


        function compileScript

        compileScript: (
        sfc: SFCDescriptor,
        options: SFCScriptCompileOptions
        ) => SFCScriptBlock;
        • Compile <script setup> It requires the whole SFC descriptor because we need to handle and merge normal <script> + <script setup> if both are present.

        function compileStyle

        compileStyle: (options: SFCStyleCompileOptions) => SFCStyleCompileResults;

          function compileStyleAsync

          compileStyleAsync: (
          options: SFCAsyncStyleCompileOptions
          ) => Promise<SFCStyleCompileResults>;

            function compileTemplate

            compileTemplate: (
            options: SFCTemplateCompileOptions
            ) => SFCTemplateCompileResults;

              function inferRuntimeType

              inferRuntimeType: (
              ctx: TypeResolveContext,
              node: Node & MaybeWithScope,
              scope?: TypeScope
              ) => string[];

                function invalidateTypeCache

                invalidateTypeCache: (filename: string) => void;

                function parse

                parse: (
                source: string,
                { sourceMap, filename, sourceRoot, pad, ignoreEmpty, compiler }?: SFCParseOptions
                ) => SFCParseResult;

                  function registerTS

                  registerTS: (_loadTS: () => typeof TS) => void;

                  function resolveTypeElements

                  resolveTypeElements: (
                  ctx: TypeResolveContext,
                  node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
                  scope?: TypeScope,
                  typeParameters?: Record<string, Node>
                  ) => ResolvedElements;
                  • Resolve arbitrary type node to a list of type elements that can be then mapped to runtime props or emits.

                  function rewriteDefault

                  rewriteDefault: (
                  input: string,
                  as: string,
                  parserPlugins?: ParserPlugin[]
                  ) => string;

                    function rewriteDefaultAST

                    rewriteDefaultAST: (ast: Statement[], s: MagicString, as: string) => void;
                    • Utility for rewriting export default in a script block into a variable declaration so that we can inject things into it


                    class ScriptCompileContext

                    class ScriptCompileContext {}


                      descriptor: SFCDescriptor,
                      options: Partial<SFCScriptCompileOptions>

                        property bindingMetadata

                        bindingMetadata: BindingMetadata;

                          property deps

                          deps?: Set<string>;
                          • to be exposed on compiled script block for HMR cache busting

                          property descriptor

                          descriptor: SFCDescriptor;

                            property emitDecl

                            emitDecl: any;

                              property emitsRuntimeDecl

                              emitsRuntimeDecl: any;

                                property emitsTypeDecl

                                emitsTypeDecl: any;

                                  property endOffset

                                  endOffset: number;

                                    property filename

                                    filename: string;

                                      property fs

                                      fs?: { fileExists(file: string): boolean; readFile(file: string): string };
                                      • cache for resolved fs

                                      property globalScopes

                                      globalScopes?: TypeScope[];

                                        property hasDefaultExportName

                                        hasDefaultExportName: boolean;

                                          property hasDefaultExportRender

                                          hasDefaultExportRender: boolean;

                                            property hasDefineEmitCall

                                            hasDefineEmitCall: boolean;

                                              property hasDefineExposeCall

                                              hasDefineExposeCall: boolean;

                                                property hasDefineModelCall

                                                hasDefineModelCall: boolean;

                                                  property hasDefineOptionsCall

                                                  hasDefineOptionsCall: boolean;

                                                    property hasDefinePropsCall

                                                    hasDefinePropsCall: boolean;

                                                      property hasDefineSlotsCall

                                                      hasDefineSlotsCall: boolean;

                                                        property helperImports

                                                        helperImports: Set<string>;

                                                          property isCE

                                                          isCE: boolean;

                                                            property isJS

                                                            isJS: boolean;

                                                              property isTS

                                                              isTS: boolean;

                                                                property modelDecls

                                                                modelDecls: Record<string, ModelDecl>;

                                                                  property options

                                                                  options: Partial<SFCScriptCompileOptions>;

                                                                    property optionsRuntimeDecl

                                                                    optionsRuntimeDecl: any;

                                                                      property propsCall

                                                                      propsCall: any;

                                                                        property propsDecl

                                                                        propsDecl: any;

                                                                          property propsDestructuredBindings

                                                                          propsDestructuredBindings: PropsDestructureBindings;

                                                                            property propsDestructureDecl

                                                                            propsDestructureDecl: any;

                                                                              property propsDestructureRestId

                                                                              propsDestructureRestId: string;

                                                                                property propsRuntimeDecl

                                                                                propsRuntimeDecl: any;

                                                                                  property propsRuntimeDefaults

                                                                                  propsRuntimeDefaults: any;

                                                                                    property propsTypeDecl

                                                                                    propsTypeDecl: any;

                                                                                      property s

                                                                                      s: MagicString;

                                                                                        property scope

                                                                                        scope?: TypeScope;

                                                                                          property scriptAst

                                                                                          scriptAst: any;

                                                                                            property scriptSetupAst

                                                                                            scriptSetupAst: any;

                                                                                              property source

                                                                                              source: string;

                                                                                                property startOffset

                                                                                                startOffset: number;

                                                                                                  property userImports

                                                                                                  userImports: Record<string, ImportBinding>;

                                                                                                    method error

                                                                                                    error: (msg: string, node: Node, scope?: TypeScope) => never;

                                                                                                      method getString

                                                                                                      getString: (node: Node, scriptSetup?: boolean) => string;

                                                                                                        method helper

                                                                                                        helper: (key: string) => string;


                                                                                                          interface AssetURLOptions

                                                                                                          interface AssetURLOptions {}

                                                                                                            property base

                                                                                                            base?: string | null;
                                                                                                            • If base is provided, instead of transforming relative asset urls into imports, they will be directly rewritten to absolute urls.

                                                                                                            property includeAbsolute

                                                                                                            includeAbsolute?: boolean;
                                                                                                            • If true, also processes absolute urls.

                                                                                                            property tags

                                                                                                            tags?: AssetURLTagConfig;

                                                                                                              interface AssetURLTagConfig

                                                                                                              interface AssetURLTagConfig {}

                                                                                                                index signature

                                                                                                                [name: string]: string[];

                                                                                                                  interface SFCAsyncStyleCompileOptions

                                                                                                                  interface SFCAsyncStyleCompileOptions extends SFCStyleCompileOptions {}

                                                                                                                    property isAsync

                                                                                                                    isAsync?: boolean;

                                                                                                                      property modules

                                                                                                                      modules?: boolean;

                                                                                                                        property modulesOptions

                                                                                                                        modulesOptions?: CSSModulesOptions;

                                                                                                                          interface SFCBlock

                                                                                                                          interface SFCBlock {}

                                                                                                                            property attrs

                                                                                                                            attrs: Record<string, string | true>;

                                                                                                                              property content

                                                                                                                              content: string;

                                                                                                                                property lang

                                                                                                                                lang?: string;

                                                                                                                                  property loc

                                                                                                                                  loc: SourceLocation;

                                                                                                                                    property map

                                                                                                                                    map?: RawSourceMap;

                                                                                                                                      property src

                                                                                                                                      src?: string;

                                                                                                                                        property type

                                                                                                                                        type: string;

                                                                                                                                          interface SFCDescriptor

                                                                                                                                          interface SFCDescriptor {}

                                                                                                                                            property cssVars

                                                                                                                                            cssVars: string[];

                                                                                                                                              property customBlocks

                                                                                                                                              customBlocks: SFCBlock[];

                                                                                                                                                property filename

                                                                                                                                                filename: string;

                                                                                                                                                  property script

                                                                                                                                                  script: SFCScriptBlock | null;

                                                                                                                                                    property scriptSetup

                                                                                                                                                    scriptSetup: SFCScriptBlock | null;

                                                                                                                                                      property shouldForceReload

                                                                                                                                                      shouldForceReload: (prevImports: Record<string, ImportBinding>) => boolean;
                                                                                                                                                      • compare with an existing descriptor to determine whether HMR should perform a reload vs. re-render.

                                                                                                                                                        Note: this comparison assumes the prev/next script are already identical, and only checks the special case where <script setup lang="ts"> unused import pruning result changes due to template changes.

                                                                                                                                                      property slotted

                                                                                                                                                      slotted: boolean;
                                                                                                                                                      • whether the SFC uses :slotted() modifier. this is used as a compiler optimization hint.

                                                                                                                                                      property source

                                                                                                                                                      source: string;

                                                                                                                                                        property styles

                                                                                                                                                        styles: SFCStyleBlock[];

                                                                                                                                                          property template

                                                                                                                                                          template: SFCTemplateBlock | null;

                                                                                                                                                            interface SFCParseOptions

                                                                                                                                                            interface SFCParseOptions {}

                                                                                                                                                              property compiler

                                                                                                                                                              compiler?: TemplateCompiler;

                                                                                                                                                                property filename

                                                                                                                                                                filename?: string;

                                                                                                                                                                  property ignoreEmpty

                                                                                                                                                                  ignoreEmpty?: boolean;

                                                                                                                                                                    property pad

                                                                                                                                                                    pad?: boolean | 'line' | 'space';

                                                                                                                                                                      property sourceMap

                                                                                                                                                                      sourceMap?: boolean;

                                                                                                                                                                        property sourceRoot

                                                                                                                                                                        sourceRoot?: string;

                                                                                                                                                                          interface SFCParseResult

                                                                                                                                                                          interface SFCParseResult {}

                                                                                                                                                                            property descriptor

                                                                                                                                                                            descriptor: SFCDescriptor;

                                                                                                                                                                              property errors

                                                                                                                                                                              errors: (CompilerError | SyntaxError)[];

                                                                                                                                                                                interface SFCScriptBlock

                                                                                                                                                                                interface SFCScriptBlock extends SFCBlock {}

                                                                                                                                                                                  property bindings

                                                                                                                                                                                  bindings?: BindingMetadata$1;

                                                                                                                                                                                    property deps

                                                                                                                                                                                    deps?: string[];
                                                                                                                                                                                    • Fully resolved dependency file paths (unix slashes) with imported types used in macros, used for HMR cache busting in @vitejs/plugin-vue and vue-loader.

                                                                                                                                                                                    property imports

                                                                                                                                                                                    imports?: Record<string, ImportBinding>;

                                                                                                                                                                                      property scriptAst

                                                                                                                                                                                      scriptAst?: _babel_types.Statement[];

                                                                                                                                                                                        property scriptSetupAst

                                                                                                                                                                                        scriptSetupAst?: _babel_types.Statement[];

                                                                                                                                                                                          property setup

                                                                                                                                                                                          setup?: string | boolean;

                                                                                                                                                                                            property type

                                                                                                                                                                                            type: 'script';

                                                                                                                                                                                              property warnings

                                                                                                                                                                                              warnings?: string[];

                                                                                                                                                                                                interface SFCScriptCompileOptions

                                                                                                                                                                                                interface SFCScriptCompileOptions {}

                                                                                                                                                                                                  property babelParserPlugins

                                                                                                                                                                                                  babelParserPlugins?: ParserPlugin[];
                                                                                                                                                                                                  • https://babeljs.io/docs/en/babel-parser#plugins

                                                                                                                                                                                                  property customElement

                                                                                                                                                                                                  customElement?: boolean | ((filename: string) => boolean);
                                                                                                                                                                                                  • Transform Vue SFCs into custom elements.

                                                                                                                                                                                                  property defineModel

                                                                                                                                                                                                  defineModel?: boolean;
                                                                                                                                                                                                  • (**Experimental**) Enable macro defineModel false

                                                                                                                                                                                                  property fs

                                                                                                                                                                                                  fs?: {
                                                                                                                                                                                                  fileExists(file: string): boolean;
                                                                                                                                                                                                  readFile(file: string): string | undefined;
                                                                                                                                                                                                  • File system access methods to be used when resolving types imported in SFC macros. Defaults to ts.sys in Node.js, can be overwritten to use a virtual file system for use in browsers (e.g. in REPLs)

                                                                                                                                                                                                  property genDefaultAs

                                                                                                                                                                                                  genDefaultAs?: string;
                                                                                                                                                                                                  • Generate the final component as a variable instead of default export. This is useful in e.g. @vitejs/plugin-vue where the script needs to be placed inside the main module.

                                                                                                                                                                                                  property globalTypeFiles

                                                                                                                                                                                                  globalTypeFiles?: string[];
                                                                                                                                                                                                  • A list of files to parse for global types to be made available for type resolving in SFC macros. The list must be fully resolved file system paths.

                                                                                                                                                                                                  property hoistStatic

                                                                                                                                                                                                  hoistStatic?: boolean;
                                                                                                                                                                                                  • Hoist <script setup> static constants. - Only enables when one <script setup> exists. true

                                                                                                                                                                                                  property id

                                                                                                                                                                                                  id: string;
                                                                                                                                                                                                  • Scope ID for prefixing injected CSS variables. This must be consistent with the id passed to compileStyle.

                                                                                                                                                                                                  property inlineTemplate

                                                                                                                                                                                                  inlineTemplate?: boolean;
                                                                                                                                                                                                  • Compile the template and inline the resulting render function directly inside setup(). - Only affects <script setup> - This should only be used in production because it prevents the template from being hot-reloaded separately from component state.

                                                                                                                                                                                                  property isProd

                                                                                                                                                                                                  isProd?: boolean;
                                                                                                                                                                                                  • Production mode. Used to determine whether to generate hashed CSS variables

                                                                                                                                                                                                  property propsDestructure

                                                                                                                                                                                                  propsDestructure?: boolean;
                                                                                                                                                                                                  • (**Experimental**) Enable reactive destructure for defineProps false

                                                                                                                                                                                                  property reactivityTransform

                                                                                                                                                                                                  reactivityTransform?: boolean;
                                                                                                                                                                                                  • (Experimental) Enable syntax transform for using refs without .value and using destructured props with reactivity


                                                                                                                                                                                                    the Reactivity Transform proposal has been dropped. This feature will be removed from Vue core in 3.4. If you intend to continue using it, disable this and switch to the [Vue Macros implementation](https://vue-macros.sxzz.moe/features/reactivity-transform.html).

                                                                                                                                                                                                  property sourceMap

                                                                                                                                                                                                  sourceMap?: boolean;
                                                                                                                                                                                                  • Enable/disable source map. Defaults to true.

                                                                                                                                                                                                  property templateOptions

                                                                                                                                                                                                  templateOptions?: Partial<SFCTemplateCompileOptions>;
                                                                                                                                                                                                  • Options for template compilation when inlining. Note these are options that would normally be passed to compiler-sfc's own compileTemplate(), not options passed to compiler-dom.

                                                                                                                                                                                                  interface SFCStyleBlock

                                                                                                                                                                                                  interface SFCStyleBlock extends SFCBlock {}

                                                                                                                                                                                                    property module

                                                                                                                                                                                                    module?: string | boolean;

                                                                                                                                                                                                      property scoped

                                                                                                                                                                                                      scoped?: boolean;

                                                                                                                                                                                                        property type

                                                                                                                                                                                                        type: 'style';

                                                                                                                                                                                                          interface SFCStyleCompileOptions

                                                                                                                                                                                                          interface SFCStyleCompileOptions {}

                                                                                                                                                                                                            property filename

                                                                                                                                                                                                            filename: string;

                                                                                                                                                                                                              property id

                                                                                                                                                                                                              id: string;

                                                                                                                                                                                                                property inMap

                                                                                                                                                                                                                inMap?: RawSourceMap;

                                                                                                                                                                                                                  property isProd

                                                                                                                                                                                                                  isProd?: boolean;

                                                                                                                                                                                                                    property map

                                                                                                                                                                                                                    map?: RawSourceMap;
                                                                                                                                                                                                                    • Deprecated

                                                                                                                                                                                                                      use inMap instead.

                                                                                                                                                                                                                    property postcssOptions

                                                                                                                                                                                                                    postcssOptions?: any;

                                                                                                                                                                                                                      property postcssPlugins

                                                                                                                                                                                                                      postcssPlugins?: any[];

                                                                                                                                                                                                                        property preprocessCustomRequire

                                                                                                                                                                                                                        preprocessCustomRequire?: (id: string) => any;

                                                                                                                                                                                                                          property preprocessLang

                                                                                                                                                                                                                          preprocessLang?: PreprocessLang;

                                                                                                                                                                                                                            property preprocessOptions

                                                                                                                                                                                                                            preprocessOptions?: any;

                                                                                                                                                                                                                              property scoped

                                                                                                                                                                                                                              scoped?: boolean;

                                                                                                                                                                                                                                property source

                                                                                                                                                                                                                                source: string;

                                                                                                                                                                                                                                  property trim

                                                                                                                                                                                                                                  trim?: boolean;

                                                                                                                                                                                                                                    interface SFCStyleCompileResults

                                                                                                                                                                                                                                    interface SFCStyleCompileResults {}

                                                                                                                                                                                                                                      property code

                                                                                                                                                                                                                                      code: string;

                                                                                                                                                                                                                                        property dependencies

                                                                                                                                                                                                                                        dependencies: Set<string>;

                                                                                                                                                                                                                                          property errors

                                                                                                                                                                                                                                          errors: Error[];

                                                                                                                                                                                                                                            property map

                                                                                                                                                                                                                                            map: RawSourceMap | undefined;

                                                                                                                                                                                                                                              property modules

                                                                                                                                                                                                                                              modules?: Record<string, string>;

                                                                                                                                                                                                                                                property rawResult

                                                                                                                                                                                                                                                rawResult: Result | LazyResult | undefined;

                                                                                                                                                                                                                                                  interface SFCTemplateBlock

                                                                                                                                                                                                                                                  interface SFCTemplateBlock extends SFCBlock {}

                                                                                                                                                                                                                                                    property ast

                                                                                                                                                                                                                                                    ast: ElementNode;

                                                                                                                                                                                                                                                      property type

                                                                                                                                                                                                                                                      type: 'template';

                                                                                                                                                                                                                                                        interface SFCTemplateCompileOptions

                                                                                                                                                                                                                                                        interface SFCTemplateCompileOptions {}

                                                                                                                                                                                                                                                          property compiler

                                                                                                                                                                                                                                                          compiler?: TemplateCompiler;

                                                                                                                                                                                                                                                            property compilerOptions

                                                                                                                                                                                                                                                            compilerOptions?: CompilerOptions;

                                                                                                                                                                                                                                                              property filename

                                                                                                                                                                                                                                                              filename: string;

                                                                                                                                                                                                                                                                property id

                                                                                                                                                                                                                                                                id: string;

                                                                                                                                                                                                                                                                  property inMap

                                                                                                                                                                                                                                                                  inMap?: RawSourceMap;

                                                                                                                                                                                                                                                                    property isProd

                                                                                                                                                                                                                                                                    isProd?: boolean;

                                                                                                                                                                                                                                                                      property preprocessCustomRequire

                                                                                                                                                                                                                                                                      preprocessCustomRequire?: (id: string) => any;
                                                                                                                                                                                                                                                                      • In some cases, compiler-sfc may not be inside the project root (e.g. when linked or globally installed). In such cases a custom require can be passed to correctly resolve the preprocessors.

                                                                                                                                                                                                                                                                      property preprocessLang

                                                                                                                                                                                                                                                                      preprocessLang?: string;

                                                                                                                                                                                                                                                                        property preprocessOptions

                                                                                                                                                                                                                                                                        preprocessOptions?: any;

                                                                                                                                                                                                                                                                          property scoped

                                                                                                                                                                                                                                                                          scoped?: boolean;

                                                                                                                                                                                                                                                                            property slotted

                                                                                                                                                                                                                                                                            slotted?: boolean;

                                                                                                                                                                                                                                                                              property source

                                                                                                                                                                                                                                                                              source: string;

                                                                                                                                                                                                                                                                                property ssr

                                                                                                                                                                                                                                                                                ssr?: boolean;

                                                                                                                                                                                                                                                                                  property ssrCssVars

                                                                                                                                                                                                                                                                                  ssrCssVars?: string[];

                                                                                                                                                                                                                                                                                    property transformAssetUrls

                                                                                                                                                                                                                                                                                    transformAssetUrls?: AssetURLOptions | AssetURLTagConfig | boolean;
                                                                                                                                                                                                                                                                                    • Configure what tags/attributes to transform into asset url imports, or disable the transform altogether with false.

                                                                                                                                                                                                                                                                                    interface SFCTemplateCompileResults

                                                                                                                                                                                                                                                                                    interface SFCTemplateCompileResults {}

                                                                                                                                                                                                                                                                                      property ast

                                                                                                                                                                                                                                                                                      ast?: RootNode;

                                                                                                                                                                                                                                                                                        property code

                                                                                                                                                                                                                                                                                        code: string;

                                                                                                                                                                                                                                                                                          property errors

                                                                                                                                                                                                                                                                                          errors: (string | CompilerError)[];

                                                                                                                                                                                                                                                                                            property map

                                                                                                                                                                                                                                                                                            map?: RawSourceMap;

                                                                                                                                                                                                                                                                                              property preamble

                                                                                                                                                                                                                                                                                              preamble?: string;

                                                                                                                                                                                                                                                                                                property source

                                                                                                                                                                                                                                                                                                source: string;

                                                                                                                                                                                                                                                                                                  property tips

                                                                                                                                                                                                                                                                                                  tips: string[];

                                                                                                                                                                                                                                                                                                    interface TemplateCompiler

                                                                                                                                                                                                                                                                                                    interface TemplateCompiler {}

                                                                                                                                                                                                                                                                                                      method compile

                                                                                                                                                                                                                                                                                                      compile: (template: string, options: CompilerOptions) => CodegenResult;

                                                                                                                                                                                                                                                                                                        method parse

                                                                                                                                                                                                                                                                                                        parse: (template: string, options: ParserOptions) => RootNode;

                                                                                                                                                                                                                                                                                                          Type Aliases

                                                                                                                                                                                                                                                                                                          type SimpleTypeResolveContext

                                                                                                                                                                                                                                                                                                          type SimpleTypeResolveContext = Pick<
                                                                                                                                                                                                                                                                                                          'source' | 'filename' | 'error' | 'options'
                                                                                                                                                                                                                                                                                                          > &
                                                                                                                                                                                                                                                                                                          Partial<Pick<ScriptCompileContext, 'scope' | 'globalScopes' | 'deps' | 'fs'>> & {
                                                                                                                                                                                                                                                                                                          ast: Statement[];
                                                                                                                                                                                                                                                                                                          • TypeResolveContext is compatible with ScriptCompileContext but also allows a simpler version of it with minimal required properties when resolveType needs to be used in a non-SFC context, e.g. in a babel plugin. The simplest context can be just:

                                                                                                                                                                                                                                                                                                            const ctx: SimpleTypeResolveContext = {
                                                                                                                                                                                                                                                                                                            filename: '...',
                                                                                                                                                                                                                                                                                                            source: '...',
                                                                                                                                                                                                                                                                                                            options: {},
                                                                                                                                                                                                                                                                                                            error() {},
                                                                                                                                                                                                                                                                                                            ast: []

                                                                                                                                                                                                                                                                                                          type TypeResolveContext

                                                                                                                                                                                                                                                                                                          type TypeResolveContext = ScriptCompileContext | SimpleTypeResolveContext;

                                                                                                                                                                                                                                                                                                            Package Files (1)

                                                                                                                                                                                                                                                                                                            Dependencies (10)

                                                                                                                                                                                                                                                                                                            Dev Dependencies (10)

                                                                                                                                                                                                                                                                                                            Peer Dependencies (0)

                                                                                                                                                                                                                                                                                                            No peer dependencies.


                                                                                                                                                                                                                                                                                                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                                                                                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@vue/compiler-sfc.

                                                                                                                                                                                                                                                                                                            • Markdown
                                                                                                                                                                                                                                                                                                            • HTML
                                                                                                                                                                                                                                                                                                              <a href="https://www.jsdocs.io/package/@vue/compiler-sfc"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>