Nuxt integration

Nuxt setup

Register a client-safe application provider and keep theme preference initialization consistent between the rendered HTML and hydration.

1. Complete the Vue setup.
2. Render one provider at the application boundary.
3. Keep server and browser theme initialization aligned.
4. Run pnpm dlx @marwes-ui/cli doctor --run-build.

<script setup lang="ts">
import {
  MarwesProvider,
  createMarwesThemeScript,
  createMarwesThemeStyle,
} from "@marwes-ui/vue"

useHead({
  htmlAttrs: { "data-allow-mismatch": "class" },
  style: [{ innerHTML: createMarwesThemeStyle({ target: "html", attribute: "class" }) }],
  script: [{
    innerHTML: createMarwesThemeScript({
      storageKey: "marwes-theme",
      defaultPreference: "system",
      target: "html",
      attribute: "class",
    }),
  }],
})
</script>

<template>
  <MarwesProvider
    default-preference="system"
    storage-key="marwes-theme"
    target="html"
    attribute="class"
    variable-strategy="style-tag"
  >
    <NuxtPage />
  </MarwesProvider>
</template>