Enabling / Disabling Notifications

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

Why

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.

To disable notifications, you could for example conditionally render <Notivue /> or early-return push() calls, but this would not stop the core from "working" in background.

Stopping

To stop Notivue from working, 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'

Install wihout starting

To install Notivue in a stopped state, pass 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 for example, 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((config) => {
    if (config.notifications.enabled) {
      startInstance()
      updateConfig(config.notifications.notivue_config)
    }
  })

Note

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