Installation

Learn how to install and configure Pohon UI in your Nuxt application.

Pohon UI is styled with UnoCSS. If your project uses Tailwind CSS, use Nuxt UI instead.

Setup

Add to a Nuxt project

Install the Pohon UI package

pnpm add pohon-ui unocss @vinicunca/unocss-preset

yarn add pohon-ui unocss @vinicunca/unocss-preset

npm install pohon-ui unocss @vinicunca/unocss-preset

bun add pohon-ui unocss @vinicunca/unocss-preset

Add the Pohon UI module in your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui']
});

There is no need to add @nuxt/icon, @nuxt/fonts or @nuxtjs/color-mode to your modules array as Pohon UI registers them automatically. You can still configure these modules in your nuxt.config.ts using the icon, fonts and colorMode keys.

Configure the UnoCSS preset

The Pohon module registers @unocss/nuxt. Create an UnoCSS configuration for the semantic utilities used by the components:

uno.config.ts

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { pohonColors } from 'pohon-ui/unocss';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca()
  ],
  theme: { colors: pohonColors },
});

Wrap your app with App component

app.vue

<template>
  <PApp>
    <NuxtPage />
  </PApp>
</template>

The App component sets up global config and is required for Toast, Tooltip and programmatic overlays.

Explore working examples

See the Nuxt playground and Vue playground for complete Pohon UI setups.

Options

You can customize Pohon UI by providing options in your nuxt.config.ts.

`prefix`

Use the prefix option to change the prefix of the components.

Default: P

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
});

`fonts`

Use the fonts option to enable or disable the @nuxt/fonts module.

Default: true

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
});

`colorMode`

Use the colorMode option to enable or disable the @nuxt/color-mode module.

Default: true

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
});

`theme.colors`

Use the theme.colors option to define the dynamic color aliases used to generate components theme.

Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
});

Each alias adds a color variant to every component theme that has one, whether your app uses it or not. Trim the list to the aliases you actually use, and keep error if you use forms since validation styles rely on it. primary is always included.The --ui-color-<alias>-* shades themselves are not generated: define them in your CSS (see CSS Variables).

Learn more about color customization and theming in the Theme section.

`theme.transitions`

Use the theme.transitions option to enable or disable transitions on components.

Default: true

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
});

This option adds the transition-colors class on components with hover or active states.

`theme.unstyled`

Use the theme.unstyled option to remove all default theme classes from components, keeping only their structure and the classes you provide through class, ui or app.config.ui.

Default: false

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
});

This strips structural classes too (positioning, transitions, flex/grid), not just cosmetic ones. Layout-heavy components like Modal, Drawer or Calendar will need you to re-supply their layout, similar to PrimeVue's unstyled mode.

`theme.defaultVariants`

Use the theme.defaultVariants option to override the default color and size variants for components.

Only defaults that are exactly primary or md are replaced, so Avatar keeps color: 'neutral' and Separator keeps size: 'xs'.

Default: { color: 'primary', size: 'md' }

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
});

`prose`

Use the prose option to force the import of Pohon UI Prose components even if @nuxtjs/mdc, @nuxt/content or @comark/nuxt is not installed.

Default: false

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prose: true
  }
});

`content`

Use the content option to force the import of the Pohon UI prose and content components even if @nuxt/content is not installed.

Default: false

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    content: true
  }
});

Continuous releases

Pohon UI uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Automatic preview releases are created for all commits and PRs to the main branch. Use them by replacing your package version with the specific commit hash or PR number.

package.json

{
  "dependencies": {
-   "pohon-ui": "^2.0.0-rc",
+   "pohon-ui": "https://pkg.pr.new/pohon-ui@4c96909",
  }
}

pkg.pr.new will automatically comment on PRs with the installation URL, making it easy to test changes.

Introduction

Pohon UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, UnoCSS components for building modern web applications.

Contribution

A comprehensive guide on contributing to Pohon UI, including project structure, development workflow, and best practices.