Nuxt

Get started with Vue Modals using Nuxt.

Installation

npm

npm add @outloud/nuxt-modals

pnpm

pnpm add @outloud/nuxt-modals

yarn

yarn add @outloud/nuxt-modals

bun

bun add @outloud/nuxt-modals

Setup

1. Register Nuxt module

See Configuration for options.

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@outloud/nuxt-modals', 
  ],
  modals: { /* options */ }
})

2. Add modals container component

The best place is to add it to your app.vue file or layout in layouts folder.

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>
    ...

    <div ref="$content">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>

    <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>