feat(playground): make ComponentDefinedInSetup template reactive + rc6

package.json

@@ -27,13 +27,13 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.4"
+    "@nuxt/kit": "^3.0.0-rc.6"
   },
   "devDependencies": {
     "@nuxt/module-builder": "latest",
     "@nuxtjs/eslint-config-typescript": "latest",
     "eslint": "latest",
-    "nuxt": "^3.0.0-rc.4",
+    "nuxt": "^3.0.0-rc.6",
     "pathe": "^0.3.2"
   },
   "keywords": [

playground/app.vue

@@ -1,68 +1,3 @@
-<script setup lang="ts">
-import Helloworld from './components/Helloworld.vue';
-const ready = useState('ready', () => false)
-/**
- * most of the time, vue compiler need at least a VNode, use h() from vue to define and render the component
- */
-const ComponentDefinedInSetup = h({
-  template: "<div class='border'>hello i'm defined in the setup of app.vue</div>"
-})
-
-/**
- * block the navigation until api calls finishes
- */
-const { data } = await useAsyncData('templates', async () => {
-  const [interactiveComponent, templateString] = await Promise.all([
-    $fetch('/api/full-component'),
-    $fetch('/api/template')
-  ])
-
-  ready.value = true
-
-  return {
-    interactiveComponent,
-    templateString
-  }
-}, {})
-
-/**
- * you can even auto generate a list of component in a composable
- * then provide it to all children using provide()/inject() !
- */
-const Interactive = h({
-  template: data.value.interactiveComponent.template,
-  setup (props) {
-    /**
-     * use new Function for closure
-     * add needed params, it can be anything
-     */
-    // eslint-disable-next-line no-new-func
-    return new Function(
-      'ref',
-      'computed',
-      'props',
-      data.value.interactiveComponent.setup
-    )(ref, computed, props)
-  },
-  props: data.value.interactiveComponent.props
-})
-</script>
-
 <template>
-  <!-- Edit this file to play around with Nuxt but never commit changes! -->
-  <div>
-    <Helloworld />
-    <template v-if="ready">
-      <ComponentDefinedInSetup />
-      <Name template="<div>I'm the Name.ts component</div>" />
-      <show-template :template="data.templateString" name="Julien" />
-      <Interactive lastname="Huang" firstname="Julien" />
-    </template>
-  </div>
-</template>
-
-<style>
-.border {
-  border: 1px solid burlywood;
-}
-</style>
+  <NuxtPage />
+</template>