test: add playground

playground/components/ComponentA.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>ComponentA</h1>
+    <slot />
+  </div>
+</template>

playground/components/ComponentB.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>ComponentB</h1>
+    <slot />
+  </div>
+</template>

playground/nuxt.config.ts

@@ -0,0 +1,16 @@
+import { defineNuxtConfig } from 'nuxt'
+import BlokwiseDynamic from '..'
+
+export default defineNuxtConfig({
+  typescript: {
+    shim: false
+  },
+
+  modules: [
+    BlokwiseDynamic
+  ],
+
+  blokwisedynamic: {
+    withConsole: true
+  }
+})

playground/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "@blokwise/dynamic-playground"
+}

playground/pages/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>index.vue</h1>
+    <NuxtDynamic
+      is-component="ComponentA"
+      :on="on"
+    />
+
+    <NuxtDynamic
+      is-component="component-b"
+      :hydration="{ type: 'whenIdle' }"
+      @submit="onSubmit"
+    >
+      <span>passed through slot</span>
+    </NuxtDynamic>
+  </div>
+</template>
+
+<script setup>
+const on = ref(['click'])
+
+onMounted(() => {
+  setTimeout(() => {
+    on.value.push('mouseover')
+  }, 10000)
+})
+</script>