wip: vapor mode

.vitepress/config.ts

@@ -761,6 +761,15 @@ export default defineConfigWithTheme<ThemeConfig>({
     }
   },
 
+  vue: {
+    // enable vapor interop for @vue/repl
+    vaporInterop: true,
+    features: {
+      // enable vapor mode
+      vapor: true
+    }
+  },
+
   vite: {
     define: {
       __VUE_OPTIONS_API__: false

.vitepress/theme/components/ScrimbaLink.vue

@@ -10,13 +10,11 @@
     </a>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    href: { type: String, required: true },
-    title: { type: String, required: true }
-  }
-}
+<script setup>
+defineProps({
+  href: { type: String, required: true },
+  title: { type: String, required: true }
+})
 </script>
 <style scoped>
 .scrimba {

.vitepress/theme/components/VueSchoolLink.vue

@@ -10,13 +10,11 @@
     </a>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    href: { type: String, required: true },
-    title: { type: String, required: true }
-  }
-}
+<script setup>
+defineProps({
+  href: { type: String, required: true },
+  title: { type: String, required: true }
+})
 </script>
 <style scoped>
 .vueschool {

package.json

@@ -9,12 +9,12 @@
     "type": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@vue/repl": "^4.7.1",
+    "@vue/repl": "^4.7.2",
     "@vue/theme": "^2.4.0",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.14.2",
-    "vitepress": "^2.0.0-alpha.17",
-    "vue": "^3.5.32"
+    "vitepress": "https://pkg.pr.new/vitepress@7b5a7f8",
+    "vue": "https://pkg.pr.new/vue@cead722"
   },
   "devDependencies": {
     "@types/body-scroll-lock": "^3.1.2",

src/examples/ExampleRepl.vue

@@ -9,12 +9,7 @@ import {
   onHashChange
 } from './utils'
 
-const { vueVersion, defaultVersion, importMap } = useVueImportMap({
-  runtimeDev: () =>
-    `https://unpkg.com/vue@${
-      vueVersion.value || defaultVersion
-    }/dist/vue.esm-browser.js`
-})
+const { vueVersion, importMap } = useVueImportMap()
 const store = useStore({
   vueVersion,
   builtinImportMap: importMap

src/guide/reusability/custom-directives.md

@@ -1,11 +1,11 @@
 # Custom Directives {#custom-directives}
 
 <script setup>
-const vHighlight = {
-  mounted: el => {
+  const applyHighlight = el => {
     el.classList.add('is-highlight')
   }
-}
+  // vapor custom directives have a different interface
+  const vHighlight = __VAPOR__ ? applyHighlight : { mounted: applyHighlight }
 </script>
 
 <style>

src/tutorial/TutorialRepl.vue

@@ -16,12 +16,7 @@ import {
   VTLink
 } from '@vue/theme'
 
-const { vueVersion, defaultVersion, importMap } = useVueImportMap({
-  runtimeDev: () =>
-    `https://unpkg.com/vue@${
-      vueVersion.value || defaultVersion
-    }/dist/vue.esm-browser.js`
-})
+const { importMap } = useVueImportMap()
 const store = useStore({
   builtinImportMap: importMap
 })