Nuxt 3 Modal
Custom modal component for Nuxt 3.
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-modalAdd 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()" />