rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nuxt): enable style extraction for antd components

Browse Source 
this fixes flashes of unstyled content on initial page load
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2024-03-16 20:32:57 -04:00
parent d562858532
commit 7f0fe97a18
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.vue
View File

@ -3,7 +3,7 @@
await getSession({ force: true }); await getSession({ force: true });
const { data } = await useAuth(); const { data } = useAuth();
let darkBool = ref(data.value?.user?.profile?.nightMode || false); let darkBool = ref(data.value?.user?.profile?.nightMode || false);
// provide("user", ref(dop?.user || null)); // provide("user", ref(dop?.user || null));
@ -29,10 +29,12 @@
// }); // });
</script> </script>
<template> <template>
<a-extract-style>
<NuxtLayout> <NuxtLayout>
<NuxtPage /> <NuxtPage />
<!-- <NuxtWelcome /> --> <!-- <NuxtWelcome /> -->
</NuxtLayout> </NuxtLayout>
</a-extract-style>
<nuxt-error-boundary> <nuxt-error-boundary>
<template #error="{ error, clearError }"> <template #error="{ error, clearError }">
<error-bound :error="error" /> <error-bound :error="error" />

8
layouts/default.vue
View File

@ -17,7 +17,7 @@
} = await useApiFetch<{ stories: number; authors: number }>("/totals"); } = await useApiFetch<{ stories: number; authors: number }>("/totals");
const collapsed = ref<boolean>(true); const collapsed = ref<boolean>(true);
const nav = ref<boolean>(false); const nav = ref<boolean>(true);
collapsed.value = true; collapsed.value = true;
@ -61,13 +61,13 @@
</div> </div>
<navbar v-if="!!bp['md']" :inline="false" /> <navbar v-if="!!bp['md']" :inline="false" />
</div> </div>
<a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']"> <a-button class="mobileTrigger" type="primary" @click="() => (collapsed = !collapsed)" v-if="!bp['md']">
<menu-unfold-outlined v-if="nav" /> <menu-unfold-outlined v-if="nav" />
<menu-fold-outlined v-else /> <menu-fold-outlined v-else />
</a-button> </a-button>
</a-layout-header> </a-layout-header>
<a-layout class="mlayout" has-sider> <a-layout class="mlayout" has-sider style="padding-top: 1em">
<a-layout-sider :trigger="null" :collapsed-width="0" :collapsible="true" v-model:collapsed="nav" v-if="!bp['md']"> <a-layout-sider :trigger="null" :collapsed="true" :collapsed-width="0" :collapsible="true" v-model:collapsed="collapsed" v-if="!bp['md']">
<navbar inline /> <navbar inline />
</a-layout-sider> </a-layout-sider>
<a-layout-content style="flex-grow: 1"> <a-layout-content style="flex-grow: 1">

4
nuxt.config.ts
View File

@ -51,6 +51,9 @@ export default defineNuxtConfig({
// i18n: { // i18n: {
// vueI18n: `./i18n.config.ts`, // vueI18n: `./i18n.config.ts`,
// }, // },
antd: {
extractStyle: true,
},
speedkit: { speedkit: {
disableNuxtFontaine: true, disableNuxtFontaine: true,
lazyOffset: { lazyOffset: {
@ -176,7 +179,6 @@ export default defineNuxtConfig({
}, },
imports: { imports: {
autoImport: true, autoImport: true,
dirsScanOptions: { dirsScanOptions: {
types: true, types: true,
}, },