🐛 fix: update naive css flash

ui/nuxt.config.ts

@@ -1,5 +1,6 @@
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
 import Components from "unplugin-vue-components/vite";
+import AutoImport from "unplugin-auto-import/vite";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -92,6 +93,18 @@ export default defineNuxtConfig({
         process.env.NODE_ENV === "development" ? ["naive-ui", "vueuc"] : [],
     },
     plugins: [
+      AutoImport({
+        imports: [
+          {
+            "naive-ui": [
+              "useDialog",
+              "useMessage",
+              "useNotification",
+              "useLoadingBar",
+            ],
+          },
+        ],
+      }),
       Components({
         resolvers: [NaiveUiResolver()],
       }),
@@ -103,5 +116,28 @@ export default defineNuxtConfig({
     },
   },
 
+  setup(nuxtApp) {
+    if (process.server) {
+      const { collect } = setup(nuxtApp.vueApp);
+      nuxtApp.ssrContext?.head.hooks.hook("tags:resolve", (ctx) => {
+        //  insert Style after meta
+        const lastMetaIndex = ctx.tags.map((x) => x.tag).lastIndexOf("meta");
+        const styleTags = collect()
+          .split("</style>")
+          .filter(Boolean)
+          .map((x) => {
+            const id = x.match(/cssr-id="(.+?)"/)?.[1];
+            const style = (x.match(/>(.*)/s)?.[1] || "").trim();
+            return {
+              tag: "style",
+              props: { "cssr-id": id },
+              innerHTML: style,
+            };
+          });
+        ctx.tags.splice(lastMetaIndex + 1, 0, ...styleTags);
+      });
+    }
+  },
+
   compatibilityDate: "2024-09-24",
 });

ui/plugins/naive.ts

@@ -0,0 +1,48 @@
+import { setup } from "@css-render/vue3-ssr";
+import { defineNuxtPlugin, type NuxtSSRContext } from "#app";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (import.meta.server) {
+    const { collect } = setup(nuxtApp.vueApp);
+    const originalRenderMeta = nuxtApp.ssrContext?.renderMeta;
+
+    nuxtApp.ssrContext = nuxtApp.ssrContext || ({} as NuxtSSRContext);
+    nuxtApp.ssrContext.renderMeta = () => {
+      if (!originalRenderMeta) {
+        return {
+          headTags: collect(),
+        };
+      }
+      const originalMeta = originalRenderMeta();
+      if ("then" in originalMeta) {
+        return originalMeta.then((resolvedOriginalMeta: any) => {
+          return {
+            ...resolvedOriginalMeta,
+            headTags: resolvedOriginalMeta["headTags"] + collect(),
+          };
+        });
+      } else {
+        return {
+          ...originalMeta,
+          headTags: originalMeta["headTags"] + collect(),
+        };
+      }
+    };
+
+    nuxtApp.ssrContext.head =
+      nuxtApp.ssrContext.head || ([] as typeof nuxtApp.ssrContext.head);
+    nuxtApp.ssrContext.head.push({
+      style: () =>
+        collect()
+          .split("</style>")
+          .map((block) => {
+            const id = RegExp(/cssr-id="(.+?)"/).exec(block)?.[1];
+            const style = (RegExp(/>(.*)/s).exec(block)?.[1] ?? "").trim();
+            return {
+              "cssr-id": id,
+              innerHTML: style,
+            };
+          }),
+    });
+  }
+});