timb-103/nuxt-modal

Custom modal component for Nuxt 3.

Nuxt 3 Modal

Custom modal component for Nuxt 3.

• Open the playground on StackBlitz.

Features

• 🔧 Fully customizable (colors, functions, slots)
• 🤳🏻 Slides up on mobile
• ✨ Nice fade in/out
• ⚡ Setup in seconds
• ✅ Access modals from anywhere

Install

Install the layer:

npm i -D nuxt-modal

Add the layer in the extends array in nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['nuxt-modal'],
})

Usage (inline modal)

<template>
  <NuxtModal v-model="isModalOpen">
    <template v-slot:header>Inline Modal</template>
    <template v-slot:content>
      <p>This modal an inline modal, that doesn't need it's own component.</p>
    </template>
  </NuxtModal>

  <button @click="openModal">Open</button>
</template>

<script>
const isModalOpen = ref(false)
const openModal = () => (isModalOpen.value = true)
</script>

Usage (component modal)

<!-- components/ModalComponent.vue -->
<template>
  <NuxtModal :name="name">
    <template v-slot:header>Hello! 👋🏼</template>
    <template v-slot:content>
      <p>This is a simple nuxt-modal component</p>
    </template>
    <template v-slot:buttons>
      <button @click="close">Cancel</button>
      <button @click="close">Got it!</button>
    </template>
  </NuxtModal>
</template>

<script setup lang="ts">
const props = defineProps<{
  name: string
}>()

const { close } = useModal(props.name)
</script>

<!-- app.vue -->
<template>
  <ModalComponent :name="name" />
  <button @click="modalComponent.open">Open</button>
</template>

<script>
const name = ref('myModal)
const modal = useModal(name.value)
</script>

That's it, you've got a fully functional modal component in your project. Keep reading to customize the modal to suit your needs.

Components

<NuxtModal />

The main component used to display modals is NuxtModal. Here's the full default configuration:

<template>
  <NuxtModal
    v-model // boolean with visible value
    :name="'modalName'"
    :header="true"
    :buttons="true"
    :borders="true"
    @close="modal.close()"
    @proceed="modal.close()"
  />
</template>

Composables

useModal()

You can access your modals anywhere in your app as we store the data with useState().

Example

const { open, close, toggle, visible } = useModal('modalName')

Slots

• header: shown at the top of the modal
• content: main content of the modal
• buttons: close/proceed buttons, if you don't add any we'll show a cancel & proceed button fallback

Example

<NuxtModal>
  <template v-slot:header></template>
  <template v-slot:content></template>
  <template v-slot:buttons></template>
</NuxtModal>

Props

Prop	Type	Default	Description
v-model	boolean	false	the visibility of the modal
name	string	``	(optional) the unique name of the modal
header	boolean	true	show/hide the modal header
buttons	boolean	true	show/hide the modal buttons
borders	boolean	true	show/hide the modal header & button borders

Events

closed

Fired when the users clicks the cancel button, or the modal background.

Example

<NuxtModal @close="doSomething()" />

proceed

Fired when the user accepts the modal. You can put any function in here to do something based on what the modal is for.

Example

<NuxtModal @proceed="doSomething()" />