diff --git a/docs/app.vue b/docs/app.vue index 54a197347..17231d3e0 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -26,14 +26,21 @@ const links = [{ to: 'https://github.com/nuxt/image/releases', target: '_blank', }] -const { data: files } = useLazyFetch('/api/search.json', { - default: () => [], - server: false, + +const enableDocsSearch = ref(false) +const files = shallowRef([]) +onNuxtReady(async () => { + files.value = await $fetch('/api/search.json') + enableDocsSearch.value = true }) -const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation()) // Provide +const navigation = useState() provide('navigation', navigation) + +if (process.server) { + navigation.value = await fetchContentNavigation() +} @@ -71,7 +78,5 @@ provide('navigation', navigation) - - - + diff --git a/docs/modules/components-chunk.ts b/docs/modules/components-chunk.ts new file mode 100644 index 000000000..8969edb13 --- /dev/null +++ b/docs/modules/components-chunk.ts @@ -0,0 +1,54 @@ +import { defineNuxtModule, useNuxt } from 'nuxt/kit' +import defu from 'defu' + +export default defineNuxtModule({ + meta: { name: 'components-chunk' }, + setup() { + const nuxt = useNuxt() + + const nonGlobals = new Set([ + 'ContentList', + 'ContentNavigation', + 'ContentQuery', + 'ContentRenderer', + 'ContentRendererMarkdown', + 'ContentSlot', + 'DocumentDrivenEmpty', + 'DocumentDrivenNotFound', + 'Markdown', + ]) + + const globals = new Set() + + nuxt.hook('vite:extendConfig', config => { + config.build = defu(config.build, { + rollupOptions: { + output: { + manualChunks: { + 'prose': [...globals] + } + } + } + }) + }) + + nuxt.hook('components:extend', components => { + for (const component of components) { + if (nonGlobals.has(component.pascalName)) { + component.global = false + } + + // Related to https://github.com/nuxt/nuxt/pull/22558 + // Adding all global components to the main entry + // To avoid lagging during page navigation on client-side + // Downside: bigger JS bundle + // With sync: 465KB, gzip: 204KB + // Without: 418KB, gzip: 184KB + if (component.global) { + globals.add(component.filePath) + component.global = true + } + } + }) + }, +}) diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index 2711b58ab..60bb32cfc 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -29,6 +29,9 @@ export default defineNuxtConfig({ 'DM+Sans': [400, 500, 600, 700], }, }, + experimental: { + headNext: true + }, nitro: { prerender: { routes: ['/api/search.json'], @@ -43,19 +46,4 @@ export default defineNuxtConfig({ '/components/nuxt-picture': { redirect: { to: '/usage/nuxt-picture', statusCode: 301 } }, '/api/use-image': { redirect: { to: '/usage/use-image', statusCode: 301 } }, }, - hooks: { - // Related to https://github.com/nuxt/nuxt/pull/22558 - // Adding all global components to the main entry - // To avoid lagging during page navigation on client-side - // Downside: bigger JS bundle - // With sync: 465KB, gzip: 204KB - // Without: 418KB, gzip: 184KB - 'components:extend' (components) { - for (const comp of components) { - if (comp.global) { - comp.global = 'sync' - } - } - } - } }) diff --git a/docs/package.json b/docs/package.json index fd69bae53..d202bc2d9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "@iconify-json/simple-icons": "^1.1.70", "@nuxt/content": "^2.8.2", "@nuxt/image": "link:..", - "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28242263.01d174c", + "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28245089.29bf1c5", "@nuxthq/studio": "^0.14.1", "@nuxtjs/fontaine": "^0.4.1", "@nuxtjs/google-fonts": "^3.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89d99661f..458fa6167 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -117,8 +117,8 @@ importers: specifier: link:.. version: link:.. '@nuxthq/elements': - specifier: npm:@nuxthq/elements-edge@0.0.1-28242263.01d174c - version: /@nuxthq/elements-edge@0.0.1-28242263.01d174c(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2) + specifier: npm:@nuxthq/elements-edge@0.0.1-28245089.29bf1c5 + version: /@nuxthq/elements-edge@0.0.1-28245089.29bf1c5(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2) '@nuxthq/studio': specifier: ^0.14.1 version: 0.14.1(rollup@3.29.0) @@ -1504,7 +1504,7 @@ packages: resolution: {integrity: sha512-O39UrOFbNgL27urwDqeMgXeYiNIUvp73nsmtt7jm9JDcMVIWykuUzyBPYtHif7gq5ElzIjjmDw9zdRGgyMzo+w==} hasBin: true peerDependencies: - '@nuxt/kit': 3.6.5 + '@nuxt/kit': ^3.7.0 nuxi: ^3.7.3 dependencies: '@nuxt/kit': 3.7.3(rollup@3.29.0) @@ -1720,12 +1720,11 @@ packages: - vti - vue-tsc - /@nuxthq/elements-edge@0.0.1-28242263.01d174c(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2): - resolution: {integrity: sha512-bROLdEguvLjtNTFIlVpPpehv/2+w1nBUsA5cFo3x/FBYMFcm4GCbXF/0cFAN3gJNaa1Pw08npDw0VwlS2gIT2Q==} + /@nuxthq/elements-edge@0.0.1-28245089.29bf1c5(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2): + resolution: {integrity: sha512-BhtsABEiRef++k1MaTEzcO1rw+Z//HVvJ6afUTHFI0CocLZmQ7/yA89WhcSR3muonOMeyS1AxD/yyugF47vV7g==} dependencies: '@nuxt/ui': 2.8.0(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2) '@vueuse/core': 10.4.1(vue@3.3.4) - lodash-es: 4.17.21 ofetch: 1.3.3 pathe: 1.1.1 tailwind-merge: 1.14.0 @@ -2004,6 +2003,7 @@ packages: dependencies: is-glob: 4.0.3 micromatch: 4.0.5 + napi-wasm: 1.1.0 bundledDependencies: - napi-wasm @@ -8659,6 +8659,9 @@ packages: dev: false optional: true + /napi-wasm@1.1.0: + resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==} + /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}