nb-modal

This is a modal component for Vue.js 3+. It displays a centered modal dialog with customizable themes, responsive breakpoints, backdrop blur, and overlay effects.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-overlays

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbOverlaysComponents from '@vlalg-nimbus/nb-overlays'
import "@vlalg-nimbus/nb-overlays/dist/style.css";

const app = createApp(App)
app.use(NbOverlaysComponents)
app.mount('#app')

To use, simply call the component, in this case it will be NbModal or nb-modal.

Important: The NbModal component uses position: fixed and will overlay the page content. It automatically handles responsive visibility based on breakpoints (visibleOnMobile, visibleOnTablet, visibleOnDesktop). When the modal is open, it blocks body scroll by default (unless scrollableBody is true). The modal is centered on the screen and supports backdrop blur effects.

Mode 1

<template>
  <NbModal nb-id="modal-1" :show="isModalOpen" @close="isModalOpen = false">
    <template #content="{ closeModal }">
      <p>Modal content here</p>
      <button @click="closeModal">Close</button>
    </template>
  </NbModal>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
show	Boolean	true	Defines if the modal is visible
ariaLabel	String	'Alternate Text Button'	Defines the aria-label attribute for screen readers
ariaAttrs	Object	{}	Allows passing custom aria attributes as an object. Keys will automatically receive the `aria-` prefix
theme	String	'light'	Defines the theme. Accepts light and dark
backdropRGBColor	Object	{ r: 0, g: 0, b: 0 }	Defines the RGB color of the backdrop overlay. Must be an object with `r`, `g`, `b` properties (0-255)
backdropAlpha	Number	0.6	Defines the alpha/opacity of the backdrop overlay (0-1)
hasBackdropBlur	Boolean	true	Defines if the backdrop should have a blur effect
backdropBlur	Number	5	Defines the blur intensity in pixels for the backdrop
overlayClickEffect	Boolean	true	Defines if clicking the overlay should trigger a zoom effect on the modal
showCloseButton	Boolean	true	Defines if the close button should be displayed
closeButtonY	Number	13	Defines the top position of the close button in pixels
closeButtonX	Number	32	Defines the right position of the close button in pixels
closeOnOverlayClick	Boolean	false	Defines if clicking the overlay should close the modal
contentPadding	String	'10px'	Defines the padding of the content area
disabled	Boolean	false	Defines if the modal is disabled
visibleOnMobile	Boolean	true	Defines if the modal should be visible on mobile breakpoints
visibleOnTablet	Boolean	true	Defines if the modal should be visible on tablet breakpoints
visibleOnDesktop	Boolean	true	Defines if the modal should be visible on desktop breakpoints
scrollableBody	Boolean	false	Defines if the body should remain scrollable when modal is open
minWidthContentSize	Number	225	Defines the minimum width of the modal content in pixels
maxWidthContentSize	Number	800	Defines the maximum width of the modal content in pixels
minHeightContentSize	Number	100	Defines the minimum height of the modal content in pixels
maxHeightContentSize	Number	300	Defines the maximum height of the modal content in pixels
mobileMinWidth	Number	0	Defines the minimum width for mobile breakpoint in pixels
mobileMaxWidth	Number	767	Defines the maximum width for mobile breakpoint in pixels
tabletMinWidth	Number	768	Defines the minimum width for tablet breakpoint in pixels
tabletMaxWidth	Number	1023	Defines the maximum width for tablet breakpoint in pixels
desktopMinWidth	Number	1024	Defines the minimum width for desktop breakpoint in pixels
desktopMaxWidth	Number	1600	Defines the maximum width for desktop breakpoint in pixels
fontFamily	String	'Lato, sans-serif'	Defines the font family for the modal
fontSize	String	'1.6em'	Defines the font size for the modal
fontWeight	Number	400	Defines the font weight for the modal
dropdownScrollClass	String	''	Defines a custom CSS class for the scrollable content area (useful for custom scrollbar styling)
borderRadius	Number	0	Defines the border radius of the modal in rem units (0-2)
zIndex	Number	2147483640	Defines the z-index for the backdrop overlay. The modal content will automatically receive `zIndex + 2`. Important: The maximum value is `2147483640` because the content always adds +2 to this value

Theme Colors (Light)

name	Value type	Default	Description
lightCloseButtonColor	String	'#333333'	Defines the close button color for light theme
lightContentColor	String	'#333333'	Defines the content text color for light theme
lightBackgroundColor	String	'#f5f5f5'	Defines the background color for light theme

Theme Colors (Dark)

name	Value type	Default	Description
darkCloseButtonColor	String	'#e0e0e0'	Defines the close button color for dark theme
darkContentColor	String	'#333333'	Defines the content text color for dark theme
darkBackgroundColor	String	'#2d2d2d'	Defines the background color for dark theme

Slots

name	Description
content	Main content area of the modal. Receives `closeModal` function as a slot prop to programmatically close the modal
close-button	Custom close button content (replaces the default "✕")

Events

name	Return type	Description
close	nothing	Fired when the modal is closed (via close button, overlay click, or programmatically)

Provide / Inject

The component provides showSidebar (a reactive ref) that can be injected by child components to access the modal's visibility state.

Usage in child components

<script setup>
import { inject } from 'vue'

const showSidebar = inject('showSidebar')

// Access the modal visibility state
console.log(showSidebar.value) // true or false
</script>

This is useful when you need to conditionally render content or apply styles based on whether the modal is open or closed.

Nb Overlaysnb-sidebar

Nb Selectsnb-select