Controlling the Instance

Since v2.4.0 Notivue allows consumers to gracefully stop and start the Notivue instance allowing to enable and disable the whole set of its features at any time.

Concepts

Notivue is backed by a store that automatically starts watching and processing new notifications, configuration updates and other events as soon as the plugin is installed.

You could for example conditionally render <Notivue /> to hide notifications, or early-return push() calls, but the store would still be "working" in background wasting resources.

Stopping

By default, everything is automatically up and running as soon as the plugin is installed: calling push() creates a notification, <Notivue /> reads and renders it, and so on.

To stop Notivue from working, you can use the useNotivueInstance in a Vue component:

<script setup>
import { useNotivueInstance } from 'notivue'

const { isRunning, stopInstance } = useNotivueInstance()

stopInstance()

console.log(isRunning.value) // false
</script>

Or the stopInstance function to stop it from outside your components:

import { stopInstance } from 'notivue'

What happens when stopInstance is called?

The plugin goes into a "paused state" just right after having:

• Reset the store to its initial state
• Stopped/cleared all store watchers and timeouts
• Destroyed <Notivue /> (and any of its event listeners and watchers)
• Proxied and voided the set handler of all config refs
• Made push(), config.update() no-op

This means that after stopping the instance you can safely have this code in your app and expect it to not trigger anything including errors, side effects, etc. It will be just like if it's commented out:

const config = useNotivue()
const { entries } = useNotifications()

for (let i = 0; i < 10; i++) {
  config.limit.value = i * 2

  push.success({
    message: "I won't be created and I won't throw an error either.",
    onAutoClear() {
      console.log('I will never be called!')
    }
  })
}

watch(config.limit, () => {
  console.log(
    'I will never be called, since config.limit is not being updated!'
  )
})

watch(
  () => entries.value.length,
  (newVal) => {
    console.log('I will never be called since no entries are created!')
  },
  { immediate: true }
)

console.log(entries.value.length) // 0

Starting / Restarting

In a Vue component:

<script setup>
import { useNotivueInstance } from 'notivue'

const { startInstance } = useNotivueInstance()
</script>

Outside your components:

import { startInstance } from 'notivue'

Installing Notivue wihout starting it

If you want to install Notivue in a stopped state, you can do so by passing false to the startOnCreation config prop:

Vite - main.js

import { createNotivue } from 'notivue'

const notivue = createNotivue({
  startOnCreation: false
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  notivue: {
    startOnCreation: false
  }
})

This is useful to make sure that Notivue is never enabled until the environment is ready, or that is not enabled at all for some users:

import { updateConfig, startInstance } from 'notivue'

fetch('/api/user-config')
  .then((res) => res.json())
  .then((data) => {
    if (data.hasNotifications) {
      startInstance()
      updateConfig(data.notificationsConfig)
    }
  })

Note

startOnCreation is a initialization-only prop and can't be read nor updated from useNotivue composable.