Gov Design System CE + Nuxt 4

Demo integrace Gov Design System CE s Nuxt 4.

Napojení komponent

1. Instalace

pnpm add @gov-design-system-ce/components @gov-design-system-ce/styles @gov-design-system-ce/fonts @gov-design-system-ce/icons @gov-design-system-ce/vue

2. Nuxt konfigurace

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@gov-design-system-ce/fonts/lib/roboto.css',
    '@gov-design-system-ce/styles/tokens.css',
    '@gov-design-system-ce/styles/styles.css',
    '@gov-design-system-ce/styles/content.css',
    '@gov-design-system-ce/styles/components.css',
  ],
  build: {
    transpile: ['@gov-design-system-ce/vue'],
  },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('gov-'),
    },
  },
})

3. Pluginy

Client plugin - registrace komponent:

// app/plugins/design-system.client.ts
import { ComponentLibrary } from '@gov-design-system-ce/vue/dist/plugin'

export default defineNuxtPlugin(({ vueApp }) => {
  window.GOV_DS_CONFIG = {
    iconsPath: '/icons',
    iconsLazyLoad: true,
  }
  vueApp.use(ComponentLibrary)
})

Server plugin - SSR hydratace:

// server/plugins/design-system.ts
import { renderToString } from '@gov-design-system-ce/components/dist/hydrate/index.mjs'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:response', async (response) => {
    if (!response.body || typeof response.body !== 'string') return

    try {
      const result = await renderToString(response.body)
      response.body = result.html
    } catch (error) {
      // Fallback na client-side rendering
    }
  })
})

4. Použití komponent

Všechny komponenty se importují z @gov-design-system-ce/vue a používají PascalCase:

<script setup>
import { GovButton, GovFormInput, GovMessage } from '@gov-design-system-ce/vue'

const name = ref('')
</script>

<template>
  <GovFormInput v-model="name" placeholder="Jméno" />
  <GovButton color="primary">Odeslat</GovButton>
  <GovMessage color="success">Úspěch</GovMessage>
</template>

Sloty se definují HTML atributem slot=, ne Vue direktivou v-slot:

<script setup>
import { GovFormControl, GovFormLabel, GovFormInput } from '@gov-design-system-ce/vue'
</script>

<template>
  <GovFormControl>
    <GovFormLabel slot="top">Jméno</GovFormLabel>
    <GovFormInput v-model="name" />
  </GovFormControl>
</template>

Poznámky

• Oficiální design system české státní správy
• Přístupnost (WCAG 2.1 AA) řešena v komponentách
• Formulářové komponenty podporují v-model
• Textarea: <GovFormInput :multiline="true" :rows="4" />
• CSP: vyžaduje style-src 'unsafe-inline' (Stencil.js generuje inline styly)

Spuštění

pnpm install
pnpm dev

Odkazy

• Gov Design System
• Nuxt