vue-vine · ShenQingchuan · Jul 13, 2025 · Jul 14, 2025 · Jul 14, 2025 · Jul 14, 2025
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/eslint.config.js b/eslint.config.js
@@ -8,7 +8,7 @@ export default antfu(
       'dist',
       'pnpm-lock.yaml',
 
-      'packages/docs/.vitepress/cache',
+      'packages/docs/**/*',
       'packages/e2e-test/**/*.vine.ts',
       'packages/create-vue-vine/template/**/*',
       'packages/nuxt-module/playground/*',

diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -35,8 +35,10 @@
   "dependencies": {
     "@babel/parser": "catalog:compiler",
     "@babel/types": "catalog:compiler",
+    "@vue/compiler-core": "catalog:vue-libs",
     "@vue/compiler-dom": "catalog:vue-libs",
     "@vue/compiler-ssr": "catalog:vue-libs",
+    "@vue/compiler-vapor": "catalog:vue-libs",
     "@vue/shared": "catalog:vue-libs",
     "get-tsconfig": "catalog:compiler",
     "hash-sum": "catalog:utils",

diff --git a/packages/compiler/src/analyze.ts b/packages/compiler/src/analyze.ts
@@ -9,6 +9,7 @@ import type {
   ObjectPattern,
   Statement,
   StringLiteral,
+  TaggedTemplateExpression,
   TSFunctionType,
   TSPropertySignature,
   TSTypeAnnotation,
@@ -92,6 +93,7 @@ import {
   isVineSlots,
   isVineStyle,
   isVineValidators,
+  isVineVaporTaggedTemplateString,
   tryInferExpressionTSType,
 } from './babel-helpers/ast'
 import { DEFAULT_MODEL_MODIFIERS_NAME, SUPPORTED_STYLE_FILE_EXTS, VineBindingTypes } from './constants'
@@ -1166,6 +1168,36 @@ function analyzeFileImportStmts(
   vineFileCtx.importsLastLine = lastImportStmt.loc
 }
 
+/**
+ * Check if the function is a Vapor Vine component function
+ * @param fnItselfNode - The function AST node itself
+ * @param templateStringNode - The template string node
+ * @returns True if the function is a Vapor Vine component function, false otherwise
+ */
+function isVaporVineCompFn(
+  fnItselfNode: BabelFunctionNodeTypes | undefined,
+  templateStringNode: TaggedTemplateExpression | undefined,
+): boolean {
+  // function MyComp() {
+  //   'use vapor'
+  // }
+  if (fnItselfNode && isBlockStatement(fnItselfNode.body)) {
+    const hasUseVaporDirective = fnItselfNode.body.directives?.some(
+      directive => directive.value.value === 'use vapor',
+    )
+    if (hasUseVaporDirective) {
+      return true
+    }
+  }
+
+  // return vine.vapor`...`
+  if (templateStringNode && isVineVaporTaggedTemplateString(templateStringNode)) {
+    return true
+  }
+
+  return false
+}
+
 function buildVineCompFnCtx(
   vineCompilerHooks: VineCompilerHooks,
   vineFileCtx: VineFileCtx,
@@ -1193,6 +1225,7 @@ function buildVineCompFnCtx(
     isExportDefault: isExportDefaultDeclaration(fnDeclNode),
     isAsync: fnItselfNode?.async ?? false,
     isCustomElement: false,
+    isVapor: isVaporVineCompFn(fnItselfNode, templateStringNode),
     fnName,
     scopeId,
     fnDeclNode,

diff --git a/packages/compiler/src/babel-helpers/ast.ts b/packages/compiler/src/babel-helpers/ast.ts
@@ -132,14 +132,32 @@ export function isDescendant(node: Node, potentialDescendant: Node): boolean {
   return false
 }
 
-export function isVineTaggedTemplateString(node: Node | null | undefined): node is TaggedTemplateExpression {
+export function isVineVaporTaggedTemplateString(node: TaggedTemplateExpression): boolean {
   return (
-    isTaggedTemplateExpression(node)
-    && isIdentifier(node.tag)
-    && node.tag.name === 'vine'
+    isMemberExpression(node.tag)
+    && isIdentifier(node.tag.object)
+    && node.tag.object.name === 'vine'
+    && isIdentifier(node.tag.property)
+    && node.tag.property.name === 'vapor'
   )
 }
 
+export function isVineTaggedTemplateString(node: Node | null | undefined): node is TaggedTemplateExpression {
+  if (!node || !isTaggedTemplateExpression(node)) {
+    return false
+  }
+
+  // vine`...` or vine.vapor`...`
+  if (isIdentifier(node.tag) && node.tag.name === 'vine') {
+    return true
+  }
+  if (isVineVaporTaggedTemplateString(node)) {
+    return true
+  }
+
+  return false
+}
+
 export function isVineMacroCallExpression(node: Node): node is CallExpression {
   if (isCallExpression(node)) {
     const calleeName = getVineMacroCalleeName(node)

diff --git a/packages/compiler/src/constants.ts b/packages/compiler/src/constants.ts
@@ -1,6 +1,7 @@
 import type { BindingTypes as VueBindingTypes } from '@vue/compiler-dom'
 
 export const DEFINE_COMPONENT_HELPER = 'defineComponent'
+export const DEFINE_VAPOR_COMPONENT_HELPER = 'defineVaporComponent'
 export const DEFINE_CUSTOM_ELEMENT_HELPER = 'defineCustomElement'
 export const USE_DEFAULTS_HELPER = 'useDefaults'
 export const TO_REFS_HELPER = 'toRefs'

diff --git a/packages/compiler/src/template/compose.ts b/packages/compiler/src/template/compose.ts
@@ -1,23 +1,36 @@
 import type { SourceLocation as BabelSourceLocation, ExportNamedDeclaration, ImportDeclaration, Node } from '@babel/types'
-import type { AttributeNode, BindingTypes, CodegenResult, CompilerOptions, NodeTransform, SourceLocation as VueSourceLocation } from '@vue/compiler-dom'
-import type { VineCompFnCtx, VineCompilerHooks, VineCompilerOptions, VineFileCtx } from '../types'
+import type { BaseCodegenResult, CompilerOptions, RootNode, SimpleExpressionNode } from '@vue/compiler-core'
+import type { AttributeNode, BindingTypes, CodegenResult as VDOMCodegenResult, SourceLocation as VueSourceLocation } from '@vue/compiler-dom'
+import type { VaporCodegenResult } from '@vue/compiler-vapor'
+import type { VineCompFnCtx, VineCompilerHooks, VineFileCtx } from '../types'
+import type { ImportItem } from './transform-asset-url'
 import { isExportNamedDeclaration, isFunctionDeclaration, isIdentifier, isImportDeclaration, isImportDefaultSpecifier, isImportSpecifier } from '@babel/types'
-import { compile, ElementTypes, NodeTypes, parse } from '@vue/compiler-dom'
-import { compile as ssrCompile } from '@vue/compiler-ssr'
+import { compile as compileVDOM, ElementTypes, NodeTypes, parse as vdomParse } from '@vue/compiler-dom'
+import { compile as compileSSR } from '@vue/compiler-ssr'
+import { compile as compileVapor, parse as vaporParse } from '@vue/compiler-vapor'
 import lineColumn from 'line-column'
 import { babelParse } from '../babel-helpers/parse'
 import { VineBindingTypes } from '../constants'
 import { vineErr, vineWarn } from '../diagnostics'
 import { appendToMapArray } from '../utils'
 import { transformAssetUrl } from './transform-asset-url'
-import { transformBooleanProp } from './transform-negative-bool'
+import { getTransformNegativeBoolPlugin } from './transform-negative-bool'
+import { transformSrcset } from './transform-srcset'
 import { walkVueTemplateAst } from './walk'
 
-const SHOULD_ADD_SUFFIX_REGEXP = /(?<=<[^>/]+)$/
+const SHOULD_ADD_SUFFIX_REGEXP = /(?<=<[a-z][^>/]*)$/i
+const basicCompilerOptions = {
+  mode: 'module',
+  hoistStatic: true,
+  cacheHandlers: true,
+  prefixIdentifiers: true,
+  inline: true,
+} as const
 
 function toPascalCase(str: string) {
   return str.replace(/(?:^|-)(\w)/g, (_, c) => c.toUpperCase())
 }
+
 export function postProcessForRenderCodegen(codegen: string): string {
   return codegen
     // https://github.com/vue-vine/vue-vine/issues/171
@@ -32,16 +45,36 @@ export function postProcessForRenderCodegen(codegen: string): string {
     )
 }
 
-function getTransformNegativeBoolPlugin(
-  transformNegativeBool: Required<VineCompilerOptions>['vueCompilerOptions']['__transformNegativeBool'],
-): NodeTransform[] {
-  if (typeof transformNegativeBool === 'object') {
-    return [transformBooleanProp({ constType: transformNegativeBool.constType })]
+function getTemplateParsedAst(
+  vineCompFnCtx: VineCompFnCtx,
+  getParsedAst: boolean,
+) {
+  if (!getParsedAst) {
+    return
   }
 
-  return [transformBooleanProp()]
+  const _parse = vineCompFnCtx.isVapor
+    ? vaporParse
+    : vdomParse
+
+  return {
+    templateParsedAst: _parse(vineCompFnCtx.templateSource, {
+      parseMode: 'base',
+      prefixIdentifiers: true,
+      expressionPlugins: ['typescript'],
+    }),
+  }
 }
 
+type TemplateCompileFn = (
+  src: string | RootNode,
+  options?: CompilerOptions
+) => BaseCodegenResult
+type VineCompileResult
+  = (VaporCodegenResult | VDOMCodegenResult)
+    & { templateParsedAst?: RootNode }
+    & { imports?: ImportItem[] }
+
 export function compileVineTemplate(
   vineCompFnCtx: VineCompFnCtx,
   compilerHooks: VineCompilerHooks,
@@ -51,56 +84,80 @@ export function compileVineTemplate(
     getParsedAst?: boolean
   },
 ): (
-  CodegenResult
-  & { templateParsedAst?: ReturnType<typeof parse> }
+  BaseCodegenResult
+  & { templateParsedAst?: RootNode }
+  & { imports?: ImportItem[] }
 ) | null {
-  const _compile = ssr ? ssrCompile : compile
+  const { volar = false } = compilerHooks.getCompilerCtx()?.options ?? {}
   const {
     __enableTransformAssetsURL = true,
     __transformNegativeBool,
-    __shouldAddTemplateSuffix,
   } = compilerHooks.getCompilerCtx()
     ?.options
     ?.vueCompilerOptions ?? {}
 
   try {
     // vue/language-tools / #4583:
-    if (
-      __shouldAddTemplateSuffix
-      && SHOULD_ADD_SUFFIX_REGEXP.test(vineCompFnCtx.templateSource)
-    ) {
+    if (volar && SHOULD_ADD_SUFFIX_REGEXP.test(vineCompFnCtx.templateSource)) {
       vineCompFnCtx.templateSource += '>'
     }
 
-    return {
-      ..._compile(vineCompFnCtx.templateSource, {
-        mode: 'module',
-        hoistStatic: true,
-        cacheHandlers: true,
-        prefixIdentifiers: true,
-        inline: true,
-        nodeTransforms: [
-          ...(__enableTransformAssetsURL
-            ? [transformAssetUrl]
-            : []
-          ),
-          ...getTransformNegativeBoolPlugin(
-            __transformNegativeBool,
-          ),
-        ],
-        ...params,
-      }),
-      templateParsedAst: (
-        getParsedAst
-          ? parse(vineCompFnCtx.templateSource, {
-              parseMode: 'base',
-              prefixIdentifiers: true,
-              expressionPlugins: [
-                'typescript',
-              ],
-            })
-          : (void 0)
+    const nodeTransforms = [
+      ...(__enableTransformAssetsURL
+        ? [transformAssetUrl, transformSrcset]
+        : []
       ),
+      getTransformNegativeBoolPlugin(
+        __transformNegativeBool,
+      ),
+    ]
+
+    const compile = (
+      ssr
+        ? (compileSSR as TemplateCompileFn)
+        : vineCompFnCtx.isVapor && !volar
+          ? (compileVapor as TemplateCompileFn)
+          : compileVDOM
+    )
+
+    try {
+      const compileOptions = {
+        ...basicCompilerOptions,
+        ...params,
+        nodeTransforms: nodeTransforms.concat(
+          params.nodeTransforms ?? [],
+        ),
+      }
+
+      const codegenResult = compile(
+        vineCompFnCtx.templateSource,
+        compileOptions,
+      )
+      const templateParsedAst = getTemplateParsedAst(
+        vineCompFnCtx,
+        getParsedAst,
+      )
+      const imports = vineCompFnCtx.isVapor
+        ? ((codegenResult as VaporCodegenResult).ast).imports
+        : (codegenResult as VDOMCodegenResult).ast.imports
+
+      return {
+        ...codegenResult,
+        imports,
+        ...templateParsedAst,
+      }
+    }
+    catch (error) {
+      compilerHooks.onError(
+        vineErr(
+          {
+            vineCompFnCtx,
+            vineFileCtx: vineCompFnCtx.fileCtx,
+          },
+          { msg: (error as Error).stack ?? String(error) },
+        ),
+      )
+      return null
     }
   }
   catch {
@@ -250,7 +307,16 @@ function setVineTemplateAst(
   vineCompFnCtx: VineCompFnCtx,
   compileResult: ReturnType<typeof compileVineTemplate>,
 ) {
-  const { ast, templateParsedAst } = compileResult!
+  const vineCompileResult = compileResult! as VineCompileResult
+  const { templateParsedAst } = vineCompileResult!
+  let ast = vineCompileResult!.ast
+
+  // Vapor mode's `ast` is `RootIRNode`
+  // but we need `RootNode`
+  if ('node' in ast) {
+    ast = ast.node
+  }
+
   vineCompFnCtx.templateAst = ast
   vineCompFnCtx.templateParsedAst = templateParsedAst
 
@@ -367,7 +433,17 @@ export function createSeparatedTemplateComposer(
         return ''
       }
 
-      const { code } = compileResult
+      const { code, imports } = compileResult
+
+      if (vineCompFnCtx.isVapor && imports) {
+        for (const assetImport of imports) {
+          mergedImportsMap.set(assetImport.path, {
+            type: 'defaultSpecifier',
+            localName: (assetImport.exp as SimpleExpressionNode).content,
+          })
+        }
+      }
+
       const generatedCodeAst = babelParse(code)
 
       // Find all import statements and store specifiers

diff --git a/packages/compiler/src/template/import-usage-check.ts b/packages/compiler/src/template/import-usage-check.ts
@@ -35,7 +35,7 @@ function resolveTemplateUsedIdentifiers(
 
   const ids = new Set<string>()
 
-  templateParsedAst!.children.forEach(walk)
+  templateParsedAst?.children.forEach(walk)
 
   function walk(node: TemplateChildNode) {
     switch (node.type) {