# Getting Started

Everything you need to know to start using Vue Equipment.

## Installation

### CLI

Add `@maas/vue-equipment` to your dependencies.

::package-install{name="@maas/vue-equipment"}
::

### Vue

If you are using Vue, import and add the plugins to your Vue app.

```js
import { createApp } from 'vue'
import { MagicModalPlugin } from '@maas/vue-equipment/plugins/MagicModal'

const app = createApp({})

app.use(MagicModalPlugin)
```

### Nuxt

Vue Equipment comes with a Nuxt module. In your Nuxt config file add `@maas/vue-equipment/nuxt` to your modules and configure it according to your needs.

```js
export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicDrawer', 'MagicMenu', 'MagicModal'],
    composables: ['useCountdown', 'useScrollTo'],
  },
})
```

## TypeScript

Vue Equipment ships with TypeScript declarations.

## Peer Dependencies

Vue Equipment relies on two kinds of peer dependencies. Every plugin needs the core ones, while the optional ones are only needed by the plugins and composables that import them.

### Core

npm (version 7 and later), pnpm and bun install the core peer dependencies automatically. If you are using Yarn, add them manually.

::docs-table
---
columns:
  - label: Package
rows:
  - items:
      - label: '[@maas/vue-primitive](https://www.npmjs.com/package/@maas/vue-primitive)'
  - items:
      - label: '[@vueuse/core](https://www.npmjs.com/package/@vueuse/core)'
  - items:
      - label: '[defu](https://www.npmjs.com/package/defu)'
  - items:
      - label: '[mitt](https://www.npmjs.com/package/mitt)'
  - items:
      - label: '[vue](https://www.npmjs.com/package/vue)'
---
::

::package-install{name="@maas/vue-primitive @vueuse/core defu mitt vue"}
::

### Optional

No package manager installs optional peer dependencies, so add the ones your plugins and composables rely on. Each plugin and composable page lists the ones it needs.

::docs-table
---
columns:
  - label: Package
  - label: Used by
rows:
  - items:
      - label: '[@floating-ui/vue](https://www.npmjs.com/package/@floating-ui/vue)'
      - label: '[MagicMenu](/plugins/MagicMenu)'
        plaintext: true
  - items:
      - label: '[@maas/magic-timer](https://www.npmjs.com/package/@maas/magic-timer)'
      - label: '[useCountdown](/composables/useCountdown)'
        plaintext: true
  - items:
      - label: '[@maas/vue-autosize](https://www.npmjs.com/package/@maas/vue-autosize)'
      - label: '[MagicAccordion](/plugins/MagicAccordion), [MagicCookie](/plugins/MagicCookie)'
        plaintext: true
  - items:
      - label: '[@vueuse/integrations](https://www.npmjs.com/package/@vueuse/integrations)'
      - label: '[MagicCommand](/plugins/MagicCommand), [MagicCookie](/plugins/MagicCookie), [MagicDrawer](/plugins/MagicDrawer), [MagicModal](/plugins/MagicModal)'
        plaintext: true
  - items:
      - label: '[focus-trap](https://www.npmjs.com/package/focus-trap)'
      - label: '[MagicCommand](/plugins/MagicCommand), [MagicDrawer](/plugins/MagicDrawer), [MagicModal](/plugins/MagicModal)'
        plaintext: true
  - items:
      - label: '[hls.js](https://www.npmjs.com/package/hls.js)'
      - label: '[MagicPlayer](/plugins/MagicPlayer)'
        plaintext: true
  - items:
      - label: '[luxon](https://www.npmjs.com/package/luxon)'
      - label: '[useCountdown](/composables/useCountdown)'
        plaintext: true
  - items:
      - label: '[motion](https://www.npmjs.com/package/motion)'
      - label: '[MagicScroll](/plugins/MagicScroll)'
        plaintext: true
  - items:
      - label: '[universal-cookie](https://www.npmjs.com/package/universal-cookie)'
      - label: '[MagicCookie](/plugins/MagicCookie)'
        plaintext: true
  - items:
      - label: '[wheel-gestures](https://www.npmjs.com/package/wheel-gestures)'
      - label: '[MagicCommand](/plugins/MagicCommand), [MagicDrawer](/plugins/MagicDrawer)'
        plaintext: true
---
::

If you’d rather install every optional peer dependency at once, use the following command.

::package-install{name="@floating-ui/vue @maas/magic-timer @maas/vue-autosize @vueuse/integrations focus-trap hls.js luxon motion universal-cookie wheel-gestures"}
::

### Nuxt

The Nuxt module needs `@nuxt/kit` and `nuxt`. Both are optional peer dependencies, so add `@nuxt/kit` if your project doesn’t list it yet.

::docs-table
---
columns:
  - label: Package
rows:
  - items:
      - label: '[@nuxt/kit](https://www.npmjs.com/package/@nuxt/kit)'
  - items:
      - label: '[nuxt](https://www.npmjs.com/package/nuxt)'
---
::

::package-install{name="@nuxt/kit"}
::