Add loading indicator

app.vue

@@ -31,6 +31,7 @@ useHead({
       <LazySwipeControls v-if="!reader" class="block sm:hidden" />
     </ClientOnly>
 
+    <NuxtLoadingIndicator />
     <NuxtLayout name="card">
       <template #footer>
         <footer

nuxt.config.ts

@@ -31,14 +31,13 @@ export default defineNuxtConfig({
     pageTransition: { name: 'page', mode: 'out-in' },
     rootId: 'ender-app',
   },
-  devtools: {
+  colorMode: {
-    enabled: true,
+    preference: 'system',
-  },
+    fallback: 'dark',
-  features: {
+    classPrefix: '',
-    inlineStyles: false,
+    classSuffix: '',
-  },
+    componentName: 'NuxtTheme',
-  experimental: {
+    storageKey: 'ecmatheme',
-    inlineRouteRules: true,
   },
   components: {
     dirs: [
@@ -49,26 +48,6 @@ export default defineNuxtConfig({
       },
     ],
   },
-  css: ['~/assets/styles/main.scss'],
-  plugins: [],
-  modules: [
-    '@pinia/nuxt',
-    '@nuxt/content',
-    '@nuxtjs/seo',
-    '@nuxtjs/google-fonts',
-    '@nuxtjs/tailwindcss',
-    '@nuxtjs/color-mode',
-    '@nuxt/eslint',
-    ['@nuxtjs/stylelint-module', { failOnError: true, lintOnStart: false }],
-  ],
-  colorMode: {
-    preference: 'system',
-    fallback: 'dark',
-    classPrefix: '',
-    classSuffix: '',
-    componentName: 'NuxtTheme',
-    storageKey: 'ecmatheme',
-  },
   content: {
     markdown: {
       remarkPlugins: ['remark-reading-time'],
@@ -108,13 +87,15 @@ export default defineNuxtConfig({
       ],
     },
   },
-  nitro: {
+  css: ['~/assets/styles/main.scss'],
-    prerender: {
+  devtools: {
-      crawlLinks: true,
+    enabled: true,
-      autoSubfolderIndex: true,
-      failOnError: true,
-      routes: ['/robots.txt', '/sitemap.xml'],
   },
+  experimental: {
+    inlineRouteRules: true,
+  },
+  features: {
+    inlineStyles: false,
   },
   googleFonts: {
     download: true,
@@ -123,6 +104,24 @@ export default defineNuxtConfig({
       Alexandria: true,
     },
   },
+  modules: [
+    '@pinia/nuxt',
+    '@nuxt/content',
+    '@nuxtjs/seo',
+    '@nuxtjs/google-fonts',
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
+    '@nuxt/eslint',
+    ['@nuxtjs/stylelint-module', { failOnError: true, lintOnStart: false }],
+  ],
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+      autoSubfolderIndex: true,
+      failOnError: true,
+      routes: ['/robots.txt', '/sitemap.xml'],
+    },
+  },
   linkChecker: {
     failOnError: true,
     report: {
@@ -130,6 +129,7 @@ export default defineNuxtConfig({
       markdown: true,
     },
   },
+  plugins: [],
   robots: {
     enabled: true,
     blockNonSeoBots: false,

package.json

@@ -12,7 +12,7 @@
     "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
     "lint:prettier": "prettier --check .",
     "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
-    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
+    "lint:fix": "prettier --write --list-different . && npm run lint:js -- --fix"
   },
   "devDependencies": {
     "@nuxt/content": "^2.12.1",