Appearance

Troubleshooting ​

Nuxt ​

I keep getting errors like Cannot read properties of null (reading 'parentNode') ​

Make sure <Notivue /> is placed inside app.vue but outside <NuxtLayout /> or <NuxtPage />.

Webpack / Vue CLI ​

I am using Webpack / Vue CLI and styles are not injected ​

If using Webpack / Vue CLI, import the styles in the <style> tag of App.vue instead of main.js:

vue
<style>
@import 'notivue/notification.css';
@import 'notivue/animations.css';
</style>

Astro ​

I am having various issues using Notivue with Astro ​

The Astro module is based on some specific implementations that are not shared with the Vue/Nuxt module.

For this reason, make sure that any function, component or object mentioned in this documentation is imported from notivue/astro and not notivue in order to use the correct modules.

useNotivue ​

I cannot access the value of any config property returned by useNotivue in my template ​

When using useNotivue, each property of the returned object is a ref. By design, Vue doesn't automatically unwrap refs on object properties so this won't work as expected:

vue
<script setup>
const config = useNotivue()
</script>

<template>
  <div>{{ config.position }}</div>
</template>

In this case you have two options:

  1. Access the .value property in the template:
vue
<script setup>
const config = useNotivue()
</script>

<template>
  <div>{{ config.position.value }}</div>
</template>
  1. Destructure the returned object:
vue
<script setup>
const { position } = useNotivue()
</script>

<template>
  <div>{{ position }}</div>
</template>

Custom Position ​

I want to push a notification in a position position different than my config ​

Notivue doesn't support rendering multiple streams in the same view. This is by design as I believe only a single stream should be displayed in a page.

To display a specific notification in a position different than the default one, the best you can do is to update the stream position before pushing the notification and restore it to its default value once it is destroyed.

ts
import { updateConfig, push } from 'notivue'

const restorePosition = () => updateConfig({ position: 'top-center' })

function pushToBottomCenter() {
  updateConfig({ position: 'bottom-center' }) // Update the position

  push.success({
    message: 'I will be displayed in a different position than the default one',
    onAutoClear: restorePosition,
    onManualClear: restorePosition
  })
}

To avoid next notifications to be pushed in that position (because you might not have control over when they're created), you can temporarly activate the queue so that they will be displayed only after the position is restored and that notification is destroyed.

ts
import { updateConfig, push } from 'notivue'

function restoreSettings() {
  updateConfig({
    position: 'top-center',
    enqueue: false, // Deactivate the queue
    limit: Infinity // Restore the limit
  })
}

function pushToBottomCenter() {
  updateConfig({
    position: 'bottom-center', // Update the position
    enqueue: true, // Activate the queue
    limit: 1 // Limit the stream to this notification
  })

  push.success({
    message: 'I will be displayed in a different position than the default one',
    onAutoClear: restoreSettings,
    onManualClear: restoreSettings
  })
}