chore: loading

app.vue

@@ -3,17 +3,18 @@ const globalStore = useGlobalStore()
 const route = useRoute()
 
 watch(
- () => route.path,
- () => {
- globalStore.setCatalog([])
- },
+ () => route.path,
+ () => {
+ globalStore.setCatalog([])
+ },
 )
 </script>
 
 <template>
- <NuxtLayout>
- <NuxtPage />
- </NuxtLayout>
+ <NuxtLayout>
+ <NuxtLoadingIndicator color="repeating-linear-gradient(90deg, #f7d038, #ffe993)" />
+ <NuxtPage />
+ </NuxtLayout>
 </template>
 
 <style>

nuxt.config.ts

@@ -6,12 +6,23 @@ export default defineNuxtConfig({
  app: {
  pageTransition: { name: 'page', mode: 'out-in' },
  },
+
  runtimeConfig: {
  version: '0.0.1',
  },
+
  build: {
  transpile: ['trpc-nuxt'],
  },
+
+ webVitals: {
+ ga: { id: 'G-JF2ZGKT7MM' },
+ },
+
+ gtag: {
+ id: 'G-JF2ZGKT7MM',
+ },
+
  modules: [
  'nuxt-svgo',
  '@nuxt/image',
@@ -29,30 +40,37 @@ export default defineNuxtConfig({
  ],
  },
  ],
+ '@nuxtjs/html-validator',
+ '@nuxtjs/web-vitals',
+ 'nuxt-gtag',
  ],
+
  shadcn: {
  /**
-  * Prefix for all the imported component
-  */
+  * Prefix for all the imported component
+  */
  prefix: '',
  /**
-  * Directory that the component lives in.
-  * @default "./components/ui"
-  */
+  * Directory that the component lives in.
+  * @default "./components/ui"
+  */
  componentDir: './components/ui',
  },
+
  ogImage: {
  googleFontMirror: true,
  fonts: [
  // will load the Noto Sans font from Google fonts
  'Noto+Serif+SC',
  ],
  },
+
  site: {
  url: 'https://i.nexmoe.com',
  name: 'Nexmoe',
  description: '充满热情的开发者和创造者，热衷于未来主义和赛博朋克，追求良好的用户体验和界面设计。分享技术见解、优化技巧和对生活的热爱，提供有价值的内容和工具，通过技术改善日常生活。',
  },
+
  sitemap: {
  sitemaps: {
  categories: {
@@ -62,7 +80,9 @@ export default defineNuxtConfig({
  },
  },
  },
+
  extends: ['@sidebase/core'],
+
  image: {
  format: ['webp'],
  quality: 80,
@@ -74,14 +94,17 @@ export default defineNuxtConfig({
  // 'img.zcool.cn',
  ],
  },
+
  googleFonts: {
  families: {
  'Noto Serif SC': true,
  },
  },
+
  typescript: {
  shim: false,
  },
+
  imports: {
  dirs: [
  // Scan top-level modules
@@ -92,4 +115,10 @@ export default defineNuxtConfig({
  'composables/**',
  ],
  },
+
+ devtools: {
+ timeline: {
+ enabled: true,
+ },
+ },
 })

package.json

@@ -40,16 +40,19 @@
  "@faker-js/faker": "^8.4.1",
  "@nuxt/test-utils": "^3.12.0",
  "@nuxtjs/google-fonts": "^3.2.0",
+ "@nuxtjs/html-validator": "^1.7.2",
  "@nuxtjs/i18n": "^8.3.0",
  "@nuxtjs/seo": "2.0.0-rc.10",
  "@nuxtjs/tailwindcss": "^6.12.0",
+ "@nuxtjs/web-vitals": "^0.2.7",
  "@testing-library/vue": "^8.0.3",
  "@vitejs/plugin-vue": "^5.0.4",
  "@vitest/ui": "^1.4.0",
  "dayjs": "^1.11.10",
  "eslint": "^8.57.0",
  "h3": "^1.11.1",
  "nuxt": "3.11.2",
+ "nuxt-gtag": "^2.0.5",
  "nuxt-icon": "^0.6.10",
  "nuxt-scheduler": "^0.1.9",
  "nuxt-svgo": "^4.0.0",

pages/flow/[id].vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-const id = useRoute().params.id
+const id = useRoute().params.id as string
 const { $client } = useNuxtApp()
+
 const flow = await $client.flow.get.query({ id })
 const config = await useGetConfig()
 
+if (!flow) {
+ throw createError({
+ statusCode: 404,
+ })
+}
+
+const loading = computed(() => flow.module.length === 0)
+
 provide('flow', flow)
 
 defineOgImageComponent('NuxtSeo', {
@@ -22,6 +31,6 @@ defineOgImageComponent('NuxtSeo', {
  {{ flow.description }}
  </PublicProse>
  <PublicProse v-else :title="flow.title" />
- <Flow v-if="flow.module.length > 0" v-bind="{ flow, header: false }" />
+ <Flow v-if="!loading" v-bind="{ flow, header: false }" />
  </div>
 </template>