---
title: "Installation"
description: "Install Akar with npm, add the Nuxt module, or wire the unplugin Vue resolver."
canonical_url: "https://vinicunca.dev/akar/overview/installation"
---
# Installation

> Install Akar with npm, add the Nuxt module, or wire the unplugin Vue resolver.

## Package

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

Import parts from `akar`. Date helpers live on `akar/date`. Namespaced objects (for example `Dialog.Root`) come from `akar/namespaced`.

```vue
<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`, …).

```ts [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.

```ts [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.

```ts [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' })
      ]
    })
  ]
});
```

## Next

[**Getting started**](https://vinicunca.dev/akar/overview/getting-started)

Assemble a Popover and add styles.

[**Composition**](https://vinicunca.dev/akar/guides/composition)

`asChild`, wrapping your own buttons, stacking primitives.

---

- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.