Container

Un élément de mise en page pour centrer et contraindre la largeur de votre contenu.

Utilisation

Utilisez l'emplacement par défaut pour centrer et limiter la largeur de votre contenu.

Sa largeur maximale est contrôlée par la variable CSS --ui-container.

<template>
  <UContainer>
    <Placeholder class="h-32" />
  </UContainer>
</template>

api

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Thème

app.config.ts

export default defineAppConfig({
  ui: {
    container: {
      base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        container: {
          base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
        }
      }
    })
  ]
})

Changelog

No recent changes

App

A wrapper to provide global configuration, toasts and tooltips to your app.

Error

A pre-built error component with NuxtError support.