Installation

Learn how to install and configure Pohon UI in your Vue application, compatible with both plain Vite and Inertia.

Setup

Add to a Vue project

Install the Pohon UI package

pnpm add pohon-ui

npm install pohon-ui

bun add pohon-ui

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install unocss, vue-router and @unhead/vue in your project's root directory.

Add the Pohon UI Vite plugin in your `vite.config.ts`

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

export default defineConfig({
  plugins: [
    vue(),
    pohon()
  ]
});

import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import pohon from 'pohon-ui/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.ts'],
      refresh: true
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    }),
    pohon({
      inertia: true
    })
  ]
});

import inertia from '@adonisjs/inertia/client';
import adonisjs from '@adonisjs/vite/client';
import vue from '@vitejs/plugin-vue';
import pohon from 'pohon-ui/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    adonisjs({
      entrypoints: ['inertia/app/app.ts'],
      reload: ['resources/views/**/*.edge']
    }),
    inertia(),
    vue(),
    pohon({
      inertia: true
    })
  ]
});

Pohon UI registers unplugin-auto-import and unplugin-vue-components, which will generate auto-imports.d.ts and components.d.ts type declaration files. You will likely want to gitignore these, and add them to your tsconfig.

tsconfig.app.json

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

.gitignore

# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

Internally, Pohon UI relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your tsconfig to enable auto-completion in your vite.config.ts.

tsconfig.node.json

{
  "compilerOptions": {
    "paths": {
      "#build/pohon": [
        "./node_modules/pohon-ui/.nuxt/pohon"
      ]
    }
  }
}

Use the Pohon UI Vue plugin

import pohon from 'pohon-ui/vue-plugin';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

const app = createApp(App);

const router = createRouter({
  routes: [],
  history: createWebHistory()
});

app.use(router);
app.use(pohon);

app.mount('#app');

import type { DefineComponent } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import pohon from 'pohon-ui/vue-plugin';
import { createApp, h } from 'vue';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel x Pohon UI';

createInertiaApp({
  title: (title) => (title ? `${title} - ${appName}` : appName),
  resolve: (name) =>
    resolvePageComponent(
      `./pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(pohon)
      .mount(el);
  }
});

import type { DefineComponent } from 'vue';
import { resolvePageComponent } from '@adonisjs/inertia/helpers';
import { createInertiaApp } from '@inertiajs/vue3';
import pohon from 'pohon-ui/vue-plugin';
import { createApp, h } from 'vue';

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS x Pohon UI';

createInertiaApp({
  title: (title) => (title ? `${title} - ${appName}` : appName),
  resolve: (name) =>
    resolvePageComponent(
      `../pages/${name}.vue`,
      import.meta.glob<DefineComponent>('../pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(pohon)
      .mount(el);
  }
});

Install and Import UnoCSS

pnpm add -D unocss

npm install -D unocss

bun add -D unocss

vite.config.ts

import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
});

Wrap your app with App component

<template>
  <PApp>
    <RouterView />
  </PApp>
</template>

<template>
  <PApp>
    <!-- Your content goes here -->
  </PApp>
</template>

<template>
  <PApp>
    <!-- Your content goes here -->
  </PApp>
</template>

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

Add the `isolate` class to your root container

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pohon UI</title>
  </head>
  <body>
    <div id="app" class="isolate"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @inertiaHead
    @vite('resources/js/app.ts')
  </head>
  <body>
    <div class="isolate">
        @inertia
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @inertiaHead()
    @vite(['inertia/app/app.ts', `inertia/pages/${page.component}.vue`])
  </head>
  <body>
    @inertia({ class: 'isolate' })
  </body>
</html>

This ensures styles are scoped to your app and prevents issues with overlays and stacking contexts.

Use a Vue template

To quickly get started with Pohon UI, you can use the starter template by running:

Terminal

npm create nuxt@latest -- --no-modules -t pohon-ui-vue

You can also get started with one of our official templates:

Starter

A minimal template to get started with Pohon UI.

Dashboard

A dashboard template with multi-column layout for building sophisticated admin interfaces.

You can use the Use this template button on GitHub to create a new repository or use the CLI:

npm create nuxt@latest -- --no-modules -t pohon-ui-vue

npm create nuxt@latest -- --no-modules -t pohon-ui-vue/dashboard

Options

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

`prefix`

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

Default: P

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      prefix: 'Nuxt'
    })
  ]
});

`pohon`

Use the pohon option to provide configuration for Pohon UI.

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      pohon: {
        colors: {
          primary: 'green',
          neutral: 'slate'
        }
      }
    })
  ]
});

`colorMode`

Use the colorMode option to enable or disable the color mode integration from @vueuse/core.

Default: true

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      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']

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      theme: {
        colors: ['primary', 'error']
      }
    })
  ]
});

`theme.defaultVariants`

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

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

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      theme: {
        defaultVariants: {
          color: 'neutral',
          size: 'sm'
        }
      }
    })
  ]
});

`inertia`

Use the inertia option to enable compatibility with Inertia.js.

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      inertia: true
    })
  ]
});

When using this option, vue-router is not required as Inertia.js provides its own routing system. The components that would normally use RouterLink will automatically use Inertia's InertiaLink component instead.

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 v4 branch. Use them by replacing your package version with the specific commit hash or PR number.

package.json

{
  "dependencies": {
-   "pohon-ui": "^1.0.0",
+   "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.