chore: nuxt demo

Author: posva

examples/nuxt/app.config.ts

@@ -0,0 +1,10 @@
+
+export default defineAppConfig({
+  dataLoaders: {
+    errors(reason) {
+      console.error('[Data Loaders]', reason)
+      return false
+    },
+  },
+})
+

examples/nuxt/nuxt.config.ts

@@ -1,19 +1,9 @@
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  typescript: {
-    shim: false,
-  },
-
-  build: {
-    transpile: [/unplugin-vue-router\/runtime/],
-  },
-
-  app: {
-    pageTransition: false,
-    layoutTransition: false,
-  },
+  devtools: { enabled: true },
 
   experimental: {
     typedPages: true,
   },
+
+  compatibilityDate: '2024-09-10',
 })

examples/nuxt/pages/users/[id].vue

@@ -3,15 +3,16 @@ import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 export const useUserData = defineBasicLoader(
+  'users-id',
   async (route) => {
-    await delay(300)
+    console.log('fetching user...')
+    await delay(1000)
     const user = {
       id: route.params.id,
       when: Date.now(),
       n: Math.round(Math.random() * 10000),
       name: 'John Doe',
     }
-    console.log('fetching user:')
     console.table(user)
     return user
   },
@@ -20,12 +21,16 @@ export const useUserData = defineBasicLoader(
 </script>
 
 <script setup lang="ts">
+defineOptions({
+  __loaders: [useUserData],
+})
 const { data: user } = useUserData()
+const route = useRoute('users-id')
 </script>
 
 <template>
   <div>
-    <h1>User {{ $route.params.id }}</h1>
+    <h1>User {{ route.params.id }}</h1>
     <pre>{{ user }}</pre>
   </div>
 </template>

examples/nuxt/plugins/uvr.ts

@@ -0,0 +1,17 @@
+import { DataLoaderPlugin, type DataLoaderPluginOptions } from 'unplugin-vue-router/data-loaders'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const appConfig = useAppConfig()
+
+  nuxtApp.vueApp.use(DataLoaderPlugin, {
+    router: nuxtApp.vueApp.config.globalProperties.$router,
+    isSSR: import.meta.server,
+    ...appConfig.dataLoaders,
+  } satisfies DataLoaderPluginOptions)
+})
+
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    dataLoaders?: Omit<DataLoaderPluginOptions, 'router'>
+  }
+}