Container

A layout element to center and constrain the width of your content.

Usage

Use the default slot to center and constrain the width of your content.

Its max width is controlled by the --ui-container CSS variable.

<template>
  <PContainer>
    <Placeholder class="h-32" />
  </PContainer>
</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`	`{}`

Theme

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 'pohon-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.