refactor(playground): deal with primevue delayed css loading issue when ssr is set to true

Author: sfxcode

playground/app/app.vue

@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import FormkitComponent from '~/components/FormkitComponent.vue'
+</script>
+
+<template>
+  <div style="padding: 1rem">
+    <div class="">
+      <h2>Formkit-PrimeVue</h2>
+      <div>
+        <h4>GitHub</h4>
+        <a href="https://github.com/sfxcode/formkit-primevue">formkit-primevue</a>
+        <h4>More examples</h4>
+        <a href="https://formkit-primevue.netlify.app/">Formkit PrimeVue Demo</a>
+      </div>
+    </div>
+    <FormkitComponent />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+</style>

playground/app.vue renamed to playground/app/components/FormkitComponent.vue

@@ -127,29 +127,18 @@ async function submitHandler() {
 </script>
 
 <template>
-  <div style="padding: 1rem">
-    <div>
-      <h2>FormKit PrimeVue Nuxt Playground</h2>
-      <div v-if="data">
-        <FormKitDataEdit
-          v-bind="data"
-          :schema="schema"
-          :show-reset="true"
-          :debug-schema="false"
-          :debug-data="true"
-          :submit-label="t('save')"
-          @data-saved="submitHandler"
-        />
-      </div>
-    </div>
-    <div class="">
-      <h2>Formkit-PrimeVue</h2>
-      <div>
-        <h4>GitHub</h4>
-        <a href="https://github.com/sfxcode/formkit-primevue">formkit-primevue</a>
-        <h4>More examples</h4>
-        <a href="https://formkit-primevue.netlify.app/">Formkit PrimeVue Demo</a>
-      </div>
+  <div>
+    <h2>FormKit PrimeVue Nuxt Playground</h2>
+    <div v-if="data">
+      <FormKitDataEdit
+        v-bind="data"
+        :schema="schema"
+        :show-reset="true"
+        :debug-schema="false"
+        :debug-data="true"
+        :submit-label="t('save')"
+        @data-saved="submitHandler"
+      />
     </div>
   </div>
 </template>

playground/nuxt.config.ts

@@ -6,6 +6,9 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
   ssr: true,
   devtools: { enabled: true },
+  future: {
+    compatibilityVersion: 4,
+  },
   compatibilityDate: '2024-11-03',
   formkit: {
     configFile: '../src/runtime/formkit.config.ts',
@@ -31,7 +34,7 @@ export default defineNuxtConfig({
     },
   },
   primevue: {
-    autoImport: true,
+    autoImport: false,
     options: {
       theme: {
         preset: Aura,