Die SSR
@@@ph000@@Verwendung
Wenn Sie Nuxt UI mit Nuxt Framework verwenden, wird SSR-Server vollständig aus der Box funktionieren. Wenn Sie es jedoch mit reinem Vue verwenden, müssen Sie einige Details beachten, damit es wie erwartet funktioniert.
Farbvariableninjektion
Nuxt UI injiziert standardmäßig in die <head> der Dokumentfarbvariablen, die in allen Komponenten verwendet werden. Da das Dokument nicht von der UI-Bibliothek in der Vue SSR verwaltet wird, müssen Sie dies manuell injizieren.
Sie können das tun, indem Sie @unhead wie folgt verwenden:
import { createHead, renderSSRHead } from '@unhead/vue/server'
// Create the header with unhead
const head = createHead()
// Render SSR header and append it to the SSR application instance
const payload = await renderSSRHead(head)
app.head.push(payload.headTags)
import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import ui from '@nuxt/ui/vue-plugin'
import { createHead, renderSSRHead } from '@unhead/vue/server'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { createSSRApp, h } from 'vue'
import { renderToString } from 'vue/server-renderer'
import type { DefineComponent } from 'vue'
const appName = import.meta.env.VITE_APP_NAME || 'Laravel x Nuxt UI'
createServer(
(page) => {
const head = createHead()
return createInertiaApp({
page,
render: renderToString,
title: (title) => (title ? `${title} - ${appName}` : appName),
resolve: (name) =>
resolvePageComponent(
`./pages/${name}.vue`,
import.meta.glob<DefineComponent>('./pages/**/*.vue')
),
setup: ({ App, props, plugin }) =>
createSSRApp({ render: () => h(App, props) })
.use(plugin)
.use(head)
.use(ui)
}).then(async (app) => {
const payload = await renderSSRHead(head)
app.head.push(payload.headTags)
return app
})
},
{ cluster: true }
)
import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import ui from '@nuxt/ui/vue-plugin'
import { createHead, renderSSRHead } from '@unhead/vue/server'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import { createSSRApp, h } from 'vue'
import { renderToString } from 'vue/server-renderer'
import type { DefineComponent } from 'vue'
const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS x Nuxt UI'
createServer(
(page) => {
const head = createHead()
return createInertiaApp({
page,
render: renderToString,
title: (title) => (title ? `${title} - ${appName}` : appName),
resolve: (name) =>
resolvePageComponent(
`../pages/${name}.vue`,
import.meta.glob<DefineComponent>('../pages/**/*.vue')
),
setup: ({ App, props, plugin }) =>
createSSRApp({ render: () => h(App, props) })
.use(plugin)
.use(head)
.use(ui)
}).then(async (app) => {
const payload = await renderSSRHead(head)
app.head.push(payload.headTags)
return app
})
},
{ cluster: true }
)
Farbschemaerkennung
Das gleiche gilt für die Farbschemaerkennung. Um aufgrund des ausgewählten Farbschemaunterschieds Flashings im SSR zu vermeiden, müssen Sie das Farbschema des Benutzers vor der Anwendungsinitialisierung erkennen.
Wenn Sie das unten stehende Skript zu <head> Ihres Dokuments hinzufügen, wird erkannt, ob der Benutzer ein dunkles Thema verwendet, und daher wird der SSR auch im dunklen Thema gerendert.
<script>
const theme = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
@inertiaHead
@vite('resources/js/app.ts')
<script>
const theme = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body>
<div class="isolate">
@inertia
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
@inertiaHead()
@vite(['inertia/app/app.ts', `inertia/pages/${page.component}.vue`])
<script>
const theme = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body>
@inertia({ class: 'isolate' })
</body>
</html>
Icons Anzeige
Nuxt UI bündelt die verwendeten Symbole in Ihrem Build, so dass sie während SSR gerendert werden und vollständig offline arbeiten, sobald Sie die Symbolsammlung lokal installieren, ohne dass eine Anfrage an die Iconify API gestellt wird. Siehe die Icons integration, um dies einzurichten und eigene Symbole zu bündeln.