Getting Started

Everything you need to know to start using Vue Equipment.

View source View as Markdown

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm add @maas/vue-equipment

Vue

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

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.

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.

pnpm add @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.

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

pnpm add @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.

pnpm add @nuxt/kit