diff --git a/package.json b/package.json
index d45d60862f..9ebfdcaf7e 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "@vue/repl": "^3.0.0",
+    "@vue/repl": "^4.0.1",
     "@vue/theme": "^2.2.5",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f810285c4..effbcfc4b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ overrides:
 
 dependencies:
   '@vue/repl':
-    specifier: ^3.0.0
-    version: 3.4.0
+    specifier: ^4.0.1
+    version: 4.0.1
   '@vue/theme':
     specifier: ^2.2.5
     version: 2.2.5(vitepress@1.0.0-rc.33)(vue@3.4.15)
@@ -669,8 +669,8 @@ packages:
       '@vue/shared': 3.4.15
     dev: false
 
-  /@vue/repl@3.4.0:
-    resolution: {integrity: sha512-iHhIsmQsp9PJuOwverCRQC2owFb0FSFzk6YWwyirAX6AqH//2FrUV4WB16f9lGX5pDXAHjxlzAE6Lqf9P17HHA==}
+  /@vue/repl@4.0.1:
+    resolution: {integrity: sha512-cmdxfUZtdedR9FhIZaShJwJmqdl7dfBVzdpqh2h1kKvyzNLLlDggN26iuKuAbUXqMjqAYiubSXwXJk4tuD4I1A==}
     dev: false
 
   /@vue/runtime-core@3.4.15:
diff --git a/src/examples/ExampleRepl.vue b/src/examples/ExampleRepl.vue
index f54d912cbe..fc56e99224 100644
--- a/src/examples/ExampleRepl.vue
+++ b/src/examples/ExampleRepl.vue
@@ -1,16 +1,31 @@
 <script setup lang="ts">
-import { Repl, ReplStore } from '@vue/repl'
+import { Repl, useStore, useVueImportMap } from '@vue/repl'
 import CodeMirror from '@vue/repl/codemirror-editor'
 import { data } from './examples.data'
-import { inject, watchEffect, version, Ref, onMounted, ref, onUnmounted } from 'vue'
+import {
+  inject,
+  watchEffect,
+  version,
+  Ref,
+  onMounted,
+  ref,
+  onUnmounted
+} from 'vue'
 import {
   resolveSFCExample,
   resolveNoBuildExample,
   onHashChange
 } from './utils'
 
-const store = new ReplStore({
-  defaultVueRuntimeURL: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
+const { vueVersion, defaultVersion, importMap } = useVueImportMap({
+  runtimeDev: () =>
+    `https://unpkg.com/vue@${
+      vueVersion.value || defaultVersion
+    }/dist/vue.esm-browser.js`
+})
+const store = useStore({
+  vueVersion,
+  builtinImportMap: importMap
 })
 
 const preferComposition = inject('prefer-composition') as Ref<boolean>
diff --git a/src/tutorial/TutorialRepl.vue b/src/tutorial/TutorialRepl.vue
index 4a394d4dff..804dcd66d6 100644
--- a/src/tutorial/TutorialRepl.vue
+++ b/src/tutorial/TutorialRepl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Repl, ReplStore } from '@vue/repl'
+import { Repl, useStore, useVueImportMap } from '@vue/repl'
 import CodeMirror from '@vue/repl/codemirror-editor'
 import { inject, watch, version, Ref, ref, computed, nextTick } from 'vue'
 import { data } from './tutorial.data'
@@ -16,8 +16,14 @@ import {
   VTLink
 } from '@vue/theme'
 
-const store = new ReplStore({
-  defaultVueRuntimeURL: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
+const { vueVersion, defaultVersion, importMap } = useVueImportMap({
+  runtimeDev: () =>
+    `https://unpkg.com/vue@${
+      vueVersion.value || defaultVersion
+    }/dist/vue.esm-browser.js`
+})
+const store = useStore({
+  builtinImportMap: importMap
 })
 
 const instruction = ref<HTMLElement>()