fix(nuxt): enable style extraction for antd components

this fixes flashes of unstyled content on initial page load
This commit is contained in:
parent d562858532
commit 7f0fe97a18
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
3 changed files with 14 additions and 10 deletions

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

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

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