wip: save

docs/.vitepress/config.ts

@@ -151,10 +151,12 @@ export default defineConfig({
     }
   },
   vue: {
-    // allow VDOM and Vapor components to be used together
-    vdomInterop: true,
+    // This enables interop between the VDOM and Vapor components.
+    vaporInterop: true,
     features: {
-      // force enable Vapor Mode
+      // Force `.vue` and `.md` files to be compiled as Vapor components.
+      // Only `.vue` files using `<script setup>` are supported.
+      // Non-`<script setup>` components require `vaporInterop: true`.
       vapor: true
     }
   },

src/client/app/index.ts

@@ -158,7 +158,7 @@ function newApp(): App {
     : import.meta.env.PROD
       ? createSSRApp(VitePressApp)
       : createClientApp(VitePressApp)
-  if (__VAPOR_VDOM_INTEROP__) {
+  if (__VAPOR_INTEROP__) {
     app.use(vaporInteropPlugin)
   }
   return app

src/client/shims.d.ts

@@ -5,7 +5,7 @@ declare const __CARBON__: boolean
 declare const __VUE_PROD_DEVTOOLS__: boolean
 declare const __ASSETS_DIR__: string
 declare const __VAPOR__: boolean
-declare const __VAPOR_VDOM_INTEROP__: boolean
+declare const __VAPOR_INTEROP__: boolean
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

src/node/plugin.ts

@@ -84,9 +84,8 @@ export async function createVitePressPlugin(
     cleanUrls
   } = siteConfig
 
-  const { vdomInterop, ...vuePluginOptions } = userVuePluginOptions ?? {}
+  const { vaporInterop, ...vuePluginOptions } = userVuePluginOptions ?? {}
   const isVaporMode = !!vuePluginOptions.features?.vapor
-  const useVdomInterop = !!vdomInterop
   let markdownToVue: Awaited<ReturnType<typeof createMarkdownToVueRenderFn>>
 
   // lazy require plugin-vue to respect NODE_ENV in @vue/compiler-x
@@ -142,7 +141,7 @@ export async function createVitePressPlugin(
           __ASSETS_DIR__: JSON.stringify(siteConfig.assetsDir),
           __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: !!process.env.DEBUG,
           __VAPOR__: isVaporMode,
-          __VAPOR_VDOM_INTEROP__: useVdomInterop
+          __VAPOR_INTEROP__: !!vaporInterop
         },
         optimizeDeps: {
           // force include vue to avoid duplicated copies when linked + optimized

src/node/siteConfig.ts

@@ -27,7 +27,7 @@ export interface VitePressVuePluginOptions extends VuePluginOptions {
   /**
    * Install Vue's VDOM interop plugin for mixed VDOM and Vapor components.
    */
-  vdomInterop?: boolean
+  vaporInterop?: boolean
 }
 
 export interface TransformContext<ThemeConfig = any> {