Vue Equipment
Light
Sponsored by

Getting Started ​

Everything you need to know to start using Vue Equipment.

Overview ​

Installation ​

CLI ​

Add @maas/vue-equipment to your dependencies.

sh
pnpm install @maas/vue-equipment
sh
npm install @maas/vue-equipment
sh
yarn add @maas/vue-equipment
sh
bun install @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'

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'],
  },
})

Peer Dependencies ​

Vue Equipment relies on various peer dependencies. Depending on your package manager as well as your project settings, you may need to add them manually. Please refer to the respective plugin’s documentation to see which dependencies are required.

Package
@floating-ui/vue
@maas/vue-autosize
@maas/magic-timer
@maas/vue-primitive
@nuxt/kit
@vueuse/core
@vueuse/integrations
defu
focus-trap
hls.js
luxon
mitt
motion
nuxt
universal-cookie
vue
wheel-gestures

Auto Installation ​

Both npm (starting from version 7) and bun automatically install peer dependencies. For pnpm we recommend adding a .npmrc file to the root of your project.

ini
auto-install-peers=true

Manual Installation ​

Alternatively, install them all with the following command or refer to the docs of each plugin to pick and choose what to install.

sh
pnpm install @floating-ui/vue @maas/vue-autosize @maas/magic-timer @maas/vue-primitive @nuxt/kit @vueuse/core @vueuse/integrations defu focus-trap hls.js luxon mitt motion nuxt universal-cookie vue wheel-gestures
sh
npm install @floating-ui/vue @maas/vue-autosize @maas/magic-timer @maas/vue-primitive @nuxt/kit @vueuse/core @vueuse/integrations defu focus-trap hls.js luxon mitt motion nuxt universal-cookie vue wheel-gestures
sh
yarn add @floating-ui/vue @maas/vue-autosize @maas/magic-timer @maas/vue-primitive @nuxt/kit @vueuse/core @vueuse/integrations defu focus-trap hls.js luxon mitt motion nuxt universal-cookie vue wheel-gestures
sh
bun install @floating-ui/vue @maas/vue-autosize @maas/magic-timer @maas/vue-primitive @nuxt/kit @vueuse/core @vueuse/integrations defu focus-trap hls.js luxon mitt motion nuxt universal-cookie vue wheel-gestures