docs: link demos to playground (beta)

package.json

@@ -55,6 +55,7 @@
     "@vitest/coverage-v8": "catalog:test",
     "@vitest/ui": "catalog:test",
     "@vue/compiler-sfc": "catalog:dev",
+    "@vue/repl": "catalog:docs",
     "@vue/test-utils": "catalog:test",
     "@vueuse/core": "workspace:*",
     "@vueuse/integrations": "workspace:*",

packages/.vitepress/plugins/markdownTransform.ts

@@ -4,6 +4,7 @@ import { join, resolve } from 'node:path'
 import { format } from 'prettier'
 import ts from 'typescript'
 import { packages } from '../../../meta/packages'
+import { version as currentVersion } from '../../../package.json'
 import { functionNames, getFunction } from '../../../packages/metadata/metadata'
 import { getTypeDefinition, replacer } from '../../../scripts/utils'
 
@@ -148,12 +149,23 @@ ${code}
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Demo = defineAsyncComponent(() => import('./${demoPath}'))
+import DemoRaw from \'./${demoPath}\?raw'
+import { useStore } from '@vue/repl'
+import { shallowRef } from 'vue'
+
+const store = useStore({
+template: shallowRef({
+  welcomeSFC: DemoRaw
+})
+})
+
+const serialized = store.serialize()
 </script>
 
 ## Demo
 
 <DemoContainer>
-<p class="demo-source-link"><a href="${URL}/${demoPath}" target="_blank">source</a></p>
+<p class="demo-source-link"><a href="${URL}/${demoPath}" target="_blank">source</a><a :href="\`https://playground.vueuse.org/?vueuse=${currentVersion}\${serialized}\`" target="_blank">playground (beta)</a></p>
 <ClientOnly>
   <Suspense>
     <Demo/>
@@ -167,12 +179,23 @@ const Demo = defineAsyncComponent(() => import('./${demoPath}'))
       : `
 <script setup>
 import Demo from \'./${demoPath}\'
+import DemoRaw from \'./${demoPath}\?raw'
+import { useStore } from '@vue/repl'
+import { shallowRef } from 'vue'
+
+const store = useStore({
+template: shallowRef({
+  welcomeSFC: DemoRaw
+})
+})
+
+const serialized = store.serialize()
 </script>
 
 ## Demo
 
 <DemoContainer>
-<p class="demo-source-link"><a href="${URL}/${demoPath}" target="_blank">source</a></p>
+<p class="demo-source-link"><a href="${URL}/${demoPath}" target="_blank">source</a><a :href="\`https://playground.vueuse.org/?vueuse=${currentVersion}\${serialized}\`" target="_blank">playground (beta)</a></p>
 <Demo/>
 </DemoContainer>
 `

packages/.vitepress/theme/styles/demo.css

@@ -16,6 +16,8 @@
   font-size: 12px;
   font-weight: 500;
   transition: color 0.5s;
+  display: flex;
+  gap: 0.5rem;
 }
 
 @media (min-width: 720px) {

packages/.vitepress/vite.config.ts

@@ -74,6 +74,7 @@ export default defineConfig({
       '@vueuse/shared',
       '@vueuse/core',
       'body-scroll-lock',
+      '@vue/repl',
     ],
     include: [
       'axios',

packages/integrations/useAsyncValidator/demo.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Rules } from 'async-validator'
+import { useAsyncValidator } from '@vueuse/integrations'
 import { reactive } from 'vue'
-import { useAsyncValidator } from './index'
 
 const form = reactive({ email: '', name: '', age: '' })
 const rules: Rules = {

packages/integrations/useDrauu/demo.client.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { useDrauu } from '@vueuse/integrations'
 import { toRefs } from '@vueuse/shared'
 import { ref as deepRef } from 'vue'
 import Scrubber from '../../core/useMediaControls/components/Scrubber.vue'
-import { useDrauu } from './index'
 
 const colors = deepRef(['black', '#ef4444', '#22c55e', '#3b82f6'])
 const target = deepRef()

packages/integrations/useIDBKeyval/demo.client.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { stringify } from '@vueuse/docs-utils'
-import { useIDBKeyval } from './index'
+import { useIDBKeyval } from '@vueuse/integrations'
 
 const KEY = 'vue-use-idb-keyval'
 

pnpm-workspace.yaml

@@ -46,6 +46,7 @@ catalogs:
   docs:
     '@shikijs/vitepress-twoslash': ^3.2.1
     '@vite-pwa/vitepress': ^1.0.0
+    '@vue/repl': ^4.5.1
     google-font-installer: ^1.2.0
     gray-matter: ^4.0.3
     markdown-table: ^3.0.4