>
> `
> note: the theme property is used to customize the toaster behavior. Each theme.containerId will have their own context (e.g. the maxToasts will count how many toaster are visible in the container with matching id).

$3

To avoid to repeat yourself, you can set defaults values for ninjaToaster.show method in the nuxt app.config.ts at the root of your project.

`ts
// app.config.ts
export default defineAppConfig({
toaster: {
// default options for ninjaToaster.show
}
})
`

$3

By default, the module create an instance of ninjaToaster and inject it in the nuxt context in useNuxtApp().$nt.

You can create your own instance and inject it in the context by using a custom plugin. Here we are using tailwindcss to style the toast.

1. Disable default plugin in nuxt.config.ts module options
`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@cssninja/nuxt-toaster'
],
toaster: {
// disable the default plugin
installPlugin: false
}
})
`

2. Create a custom toast component
`vue



`

3. Create a custom plugin

`ts
// plugins/toaster.ts
import MyToast from '~/components/MyToast.vue'

interface ToasterOptions {
message: string
title?: string
}

export default defineNuxtPlugin(() => {
// define or import a theme
const theme = {
containerId: 'nt-container-bottom-right',
containerClass: [
'absolute',
'inset-0',
'pointer-events-none',
'p-4',
'flex',
'flex-col-reverse',
'items-start',
'gap-2'
],
wrapperClass: [
'pointer-events-auto',
'cursor-pointer',
],
}

// set default show options here
const nt = createNinjaToaster({
theme,
maxToasts: 5,
transition: {
enterActiveClass: 'transition duration-300 ease-out',
enterFromClass: 'transform translate-x-full opacity-0',
enterToClass: 'transform translate-x-0 opacity-100',
leaveActiveClass: 'transition duration-300 ease-in',
leaveFromClass: 'transform translate-x-0 opacity-100',
leaveToClass: 'transform translate-x-full opacity-0'
}
})

const toaster = {
info (options: ToasterOptions) {
nt.show(() => h(MyToast, {
...options,
type: 'info'
}))
},
async error (options: ToasterOptions) {
// wait for the toast to be mounted
const { el, close } = await nt.show(() => h(MyToastError, {
...options,
type: 'error'
}))

// focus the toast once it's mounted
el.focus()
},
close() {
// close all toasts
nt.closeAll()

// or close toasts in a specific containerId
nt.close('nt-container-bottom-right')

// or close toasts using a theme
nt.close(theme)
},
}

return {
provide {
toaster
}
}
})
`

3. Use your toaster instance in your app
`ts
// pages/index.vue
const { $toaster } = useNuxtApp()

$toaster.info({
title: 'Hello world',
message: 'This is a toaster info message'
})
$toaster.error({
title: 'Hello world',
message: 'This is a toaster error message'
})
`

Theming

$3

`css
#nt-container {
/ make container fit the screen /
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 100;
pointer-events: none;

/ position the toasts using flexbox /
display: flex;

/**
* position all toasts in bottom of the screen
* - use "flex-direction: column;" to position in top screen
*/
flex-direction: column-reverse;

/**
* align all toasts to the center
* - use "align-items: start" to aling to the left
* - use "align-items: end" to aling to the right
*/
align-items: center;

/ add some space between toasts and screen /
padding: 2rem;
gap: 1rem;
}

#nt-container [role='alert'] {
/ allow toasts to be interactive /
pointer-events: auto;

/ add styles to toasts /
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}


@media (max-width: 767px) {
#nt-container {
/ fit toasts to screen on mobile /
padding: 0;
}
}

`




Development

- Run npm run dev:prepare to generate type stubs.
- Use npm run dev` to start playground in development mode.