Getting Started

Get started with Vue Modals quickly by following steps below.

If you are using Nuxt, you can skip this page and go to Nuxt tutorial.

Installation

npm

npm add @outloud/vue-modals

pnpm

pnpm add @outloud/vue-modals

yarn

yarn add @outloud/vue-modals

bun

bun add @outloud/vue-modals

Setup

1. Register the plugin to your app in your entry file.

See Configuration for options.

main.ts

import { createApp } from 'vue'
import { createModals } from '@outloud/vue-modals'
import App from './App.vue'

const app = createApp(App)
const modals = createModals({/* options */}) 

app.use(modals) 
app.mount('#app')

2. Import required CSS

main.ts

import '@outloud/vue-modals/style.css'

3. Add modals container component

The best place is to add it to your main App.vue file.

TIP

It is also strongly recommended to set content element, which will become disabled when modal is displayed, see Modals Container for more information.

App.vue

<template>
  <div>
    ...

    <main ref="$content">
      <RouterView>
    </main>

    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import { useModals } from '@outloud/vue-modals'

const modals = useModals()
const $content = ref<HTMLElement>()

modals.content = $content
</script>