Troubleshooting

On Nuxt, I keep getting errors like Cannot read properties of null (reading 'parentNode')

Make sure <Notivue /> is placed inside app.vue and not in a layout or page.

I'm having troubles accessing 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:

<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:

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

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

2. Destructure the returned object:

<script setup>
const { position } = useNotivue()
</script>

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

I want to push a specific 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.

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.

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
  })
}