fix: handle Vue 3.6+ vapor runtime imports correctly (#357)

edison1105 · web-flow · commit c4bac9c9d228 · 2025-07-16T11:42:27.000+08:00
close #356 - Use `https://cdn.jsdelivr.net/npm/vue@3.6.x/dist/vue.runtime-with-vapor.esm-browser.js` as the runtime import. - Use `createVaporApp` or `createVaporSSRApp` when vapor mode is supported and `App.vue` is a vapor component.
diff --git a/src/import-map.ts b/src/import-map.ts
@@ -1,5 +1,15 @@
 import { computed, version as currentVersion, ref } from 'vue'
 
+export function getVersions(version: string): number[] {
+  return version.split('.').map((v) => parseInt(v, 10))
+}
+
+export function isVaporSupported(version: string): boolean{
+  const [major, minor] = getVersions(version)
+  // vapor mode is supported in v3.6+
+  return major > 3 || (major === 3 && minor >= 6)
+}
+
 export function useVueImportMap(
   defaults: {
     runtimeDev?: string | (() => string)
@@ -15,15 +25,21 @@ export function useVueImportMap(
 
   const productionMode = ref(false)
   const vueVersion = ref<string | null>(defaults.vueVersion || null)
+
+  function getVueURL() {
+    const version = vueVersion.value || currentVersion
+    return isVaporSupported(version)
+      ? `https://cdn.jsdelivr.net/npm/vue@${version}/dist/vue.runtime-with-vapor.esm-browser${productionMode.value ? `.prod` : ``}.js`
+      : `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
+  }
+
   const importMap = computed<ImportMap>(() => {
     const vue =
       (!vueVersion.value &&
         normalizeDefaults(
           productionMode.value ? defaults.runtimeProd : defaults.runtimeDev,
         )) ||
-      `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${
-        vueVersion.value || currentVersion
-      }/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
+      getVueURL()
 
     const serverRenderer =
       (!vueVersion.value && normalizeDefaults(defaults.serverRenderer)) ||
diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
@@ -16,6 +16,7 @@ import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
 import type { Store } from '../store'
 import { injectKeyProps } from '../types'
+import { getVersions, isVaporSupported } from '../import-map'
 
 export interface SandboxProps {
   store: Store
@@ -202,9 +203,7 @@ async function updatePreview() {
 
   let isSSR = props.ssr
   if (store.value.vueVersion) {
-    const [major, minor, patch] = store.value.vueVersion
-      .split('.')
-      .map((v) => parseInt(v, 10))
+    const [major, minor, patch] = getVersions(store.value.vueVersion)
     if (major === 3 && (minor < 2 || (minor === 2 && patch < 27))) {
       alert(
         `The selected version of Vue (${store.value.vueVersion}) does not support in-browser SSR.` +
@@ -214,6 +213,10 @@ async function updatePreview() {
     }
   }
 
+  const vaporSupported = isVaporSupported(
+    store.value.vueVersion || store.value.compiler?.version
+  )
+
   try {
     const { mainFile } = store.value
 
@@ -228,10 +231,11 @@ async function updatePreview() {
         `const __modules__ = {};`,
         ...ssrModules,
         `import { renderToString as _renderToString } from 'vue/server-renderer'
-         import { createSSRApp as _createApp } from 'vue'
+         import { createSSRApp as _createApp ${vaporSupported ? ', createVaporSSRApp as _createVaporApp' : ''} } from 'vue'
          const AppComponent = __modules__["${mainFile}"].default
          AppComponent.name = 'Repl'
-         const app = _createApp(AppComponent)
+         const vaporSupported = ${vaporSupported}
+         const app = (vaporSupported && AppComponent.__vapor ? _createVaporApp : _createApp)(AppComponent)
          if (!app.config.hasOwnProperty('unwrapInjectedRef')) {
            app.config.unwrapInjectedRef = true
          }
@@ -297,14 +301,19 @@ async function updatePreview() {
     // if main file is a vue file, mount it.
     if (mainFile.endsWith('.vue')) {
       codeToEval.push(
-        `import { ${
-          isSSR ? `createSSRApp` : `createApp`
-        } as _createApp } from "vue"
+        `import { ${isSSR ? `createSSRApp` : `createApp`} as _createApp ${
+          vaporSupported
+            ? `, ${
+                isSSR ? 'createVaporSSRApp' : 'createVaporApp'
+              } as _createVaporApp`
+            : ''
+        } } from "vue"
         ${previewOptions.value?.customCode?.importCode || ''}
         const _mount = () => {
           const AppComponent = __modules__["${mainFile}"].default
           AppComponent.name = 'Repl'
-          const app = window.__app__ = _createApp(AppComponent)
+          const vaporSupported = ${vaporSupported}
+          const app = window.__app__ = (vaporSupported && AppComponent.__vapor ? _createVaporApp : _createApp)(AppComponent)
           if (!app.config.hasOwnProperty('unwrapInjectedRef')) {
             app.config.unwrapInjectedRef = true
           }
