Installation
Install Akar with npm, add the Nuxt module, or wire the unplugin Vue resolver.
Package
pnpm add akar
yarn add akar
npm install akar
bun add akar
Import parts from akar. Date helpers live on akar/date. Namespaced objects (for example Dialog.Root) come from akar/namespaced.
<script setup lang="ts">
import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'akar';
</script>
Nuxt module
Akar ships akar/nuxt. Add it to modules and every primitive is auto-imported with no prefix (AccordionRoot, DialogTrigger, …).
nuxt.config.ts
export default defineNuxtConfig({
modules: ['akar/nuxt']
});
Options (configKey: 'akar'):
prefix
string
Prepended to every auto-imported name. Default
''.components
boolean | Record<string, boolean>
true (default) registers every group. false registers none. Pass a map of group keys from akar/constant (accordion, dialog, …) to opt in per group.nuxt.config.ts
export default defineNuxtConfig({
modules: ['akar/nuxt'],
akar: {
prefix: '',
components: true
}
});
unplugin-vue-components
For Vite (and other unplugin hosts), use akar/resolver. Names match the Nuxt module: no prefix unless you set one.
vite.config.ts
import vue from '@vitejs/plugin-vue';
import AkarResolver from 'akar/resolver';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
vue(),
Components({
dts: true,
resolvers: [
AkarResolver()
// AkarResolver({ prefix: 'Akar' })
]
})
]
});