From 9babafd66fe0040d31ca4de065dfc7ae9ec36788 Mon Sep 17 00:00:00 2001
From: Simone Mastromattei <smastrom@proton.me>
Date: Sun, 14 Apr 2024 14:43:56 +0200
Subject: [PATCH] 2.4.0 (#50)

* Core - Rename NKeys to NType, move Notivue utils to core

* Notivue - Fine-tine `pauseOnTabChange: false` behavior

* Notivue - Remove unnecessary ResizeObsever repositioning call

* Core - Move `isTopAlign` out of `createConfig`

* Core - Rename `createWatchers`, remove repositioning watcher, get unwatchers

* Core - Add counters, fine-tune repositioning watcher

* Core - Add `useNotivueInstance`

* Demo - Add NavActions, instance controls

* Core, Notifications - Add new type aliases

* Dev - Disable minification, nuxt devtools

* Notivue - Rename attributes

* Core - Sort imports in main entry file

* Pkg - Add exports.js, verify-exports.js

* Demo - Edit duplicate control behavior

* Core - Cleanup useless code in `createStore`

* Pkg - Edit README

* Core - Update config tests

* Tests - Fix import tests

* Pkg - Edit README, nuxt/README

* Core - Restore triggerRef on queue add/edit methods

* Core - Use interfaces, edit some comments

* Core - Add Intellisense description to `useNotivueInstance`

* Notivue, NotivueKeyboard - Force unmount when not running

* Tests - Add instance tests

* Tests - Imrpove instance tests nomenclatures

* Demo - Move limit select above enqueue control

* Notivue - Rename window focus events

* Pkg - Bump 2.4.0

* Astro - Make push more readable

* Astro - Prefer createdAt istead of counter for event id

* Core, Notivue - Fix some typos
---
 .gitignore                                    |   2 +
 README.md                                     |   3 -
 demo/components/nav/Nav.vue                   |  57 +++++-
 demo/components/nav/NavActions.vue            |  31 ++++
 demo/components/nav/NavNotivueConfig.vue      |  30 ++--
 demo/components/nav/NavPushBuiltIn.vue        |   3 +-
 demo/components/shared/Button.vue             |   3 +-
 demo/nuxt.config.ts                           |   9 +
 packages/notivue/Notifications/icons/index.ts |  30 ++--
 packages/notivue/Notifications/types.ts       |   4 +
 packages/notivue/Notivue/Notivue.vue          |   6 +-
 packages/notivue/Notivue/NotivueImpl.vue      |  15 +-
 .../composables/useResizeListObserver.ts      |  22 ++-
 .../Notivue/composables/useWindowFocus.ts     |  26 +--
 packages/notivue/Notivue/utils.ts             |  18 +-
 .../NotivueKeyboard/NotivueKeyboard.vue       |  14 +-
 packages/notivue/astro/Notivue.vue            |   2 +-
 packages/notivue/astro/push.ts                |  23 ++-
 packages/notivue/core/createNotivue.ts        |  94 ++++++++--
 packages/notivue/core/createPush.ts           |  20 +--
 packages/notivue/core/createStore.ts          | 166 +++++++++++-------
 ...eateWatchers.ts => createStoreWatchers.ts} |  31 ++--
 packages/notivue/core/types.ts                |  24 ++-
 packages/notivue/core/useStore.ts             |  58 ++++--
 packages/notivue/core/utils.ts                |  55 +++++-
 packages/notivue/index.ts                     |  30 ++--
 packages/notivue/nuxt/README.md               |  13 +-
 packages/notivue/nuxt/module.d.ts             |   1 +
 packages/notivue/nuxt/module.json             |   2 +-
 packages/notivue/nuxt/module.mjs              |  31 +---
 packages/notivue/package.json                 |  11 +-
 packages/notivue/scripts/verify-exports.js    |  40 +++++
 packages/notivue/scripts/verify-tarball.sh    |   1 +
 packages/notivue/shared/exports.js            |  44 +++++
 packages/notivue/vite.config.ts               |  38 ++--
 tests/Notivue/components/Notivue.vue          |  52 +++++-
 tests/Notivue/instance.cy.ts                  |  93 ++++++++++
 tests/Notivue/slot-internal-properties.cy.ts  |   4 +-
 tests/config/update-config.test.ts            |  14 +-
 tests/cypress/support/commands-notivue.ts     |   7 +-
 tests/package.json                            |  10 +-
 tests/tsconfig.json                           |   1 +
 42 files changed, 810 insertions(+), 328 deletions(-)
 create mode 100644 demo/components/nav/NavActions.vue
 rename packages/notivue/core/{createWatchers.ts => createStoreWatchers.ts} (55%)
 create mode 100644 packages/notivue/scripts/verify-exports.js
 create mode 100644 packages/notivue/shared/exports.js
 create mode 100644 tests/Notivue/instance.cy.ts

diff --git a/.gitignore b/.gitignore
index f5e24b8f..82fe8e7e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@ cypress/screenshots
 
 .nuxt
 pnpm-lock.yaml
+
+astro-dev
diff --git a/README.md b/README.md
index 7085bd8e..35fe309e 100644
--- a/README.md
+++ b/README.md
@@ -48,9 +48,6 @@ _Built-in announcements, reduced-motion and keyboard support_
 **💫 Nuxt and Astro modules**  
 _Built-in Nuxt and Astro ad-hoc modules_
 
-**📜 Complete yet friendly documentation**  
-_You're covered with a plain-language [documentation](https://notivuedocs.netlify.app/)_
-
 <br />
 
 ## Installation
diff --git a/demo/components/nav/Nav.vue b/demo/components/nav/Nav.vue
index bee1df2e..fed4acb4 100644
--- a/demo/components/nav/Nav.vue
+++ b/demo/components/nav/Nav.vue
@@ -1,4 +1,42 @@
+<script setup lang="ts">
+import { useNotivueInstance } from 'notivue'
+
+const { isRunning } = useNotivueInstance()
+
+let shouldDisplayNotice = ref(false)
+
+let timeout: number
+
+watch(isRunning, (newVal) => {
+   window.clearTimeout(timeout)
+
+   shouldDisplayNotice.value = true
+
+   if (newVal) {
+      window.setTimeout(() => {
+         shouldDisplayNotice.value = false
+      }, 3000)
+   }
+})
+</script>
+
 <template>
+   <div
+      class="Notice"
+      v-if="shouldDisplayNotice"
+      :style="{ backgroundColor: isRunning ? '#399b76' : '#d2463c' }"
+      aria-live="assertive"
+      role="alert"
+      dir="ltr"
+   >
+      <template v-if="isRunning">
+         Notivue is now running again. This will be dismissed shortly.</template
+      >
+      <template v-else>
+         Notivue instance has been stopped. Restart it to create notifications.
+      </template>
+   </div>
+
    <nav dir="ltr">
       <div class="Container">
          <SharedButtonGroup name="Position">
@@ -28,18 +66,25 @@
          </SharedButtonGroup>
 
          <SharedButtonGroup name="Actions">
-            <SharedButton @click="push.clearAll()" text="Dismiss All">
-               <IconsDismissIcon />
-            </SharedButton>
-            <SharedButton @click="push.destroyAll()" text="Destroy All">
-               <IconsDestroyIcon />
-            </SharedButton>
+            <NavActions />
          </SharedButtonGroup>
       </div>
    </nav>
 </template>
 
 <style scoped>
+.Notice {
+   position: fixed;
+   bottom: var(--nav-height);
+   width: 100%;
+   color: #fff;
+   padding: 0.25rem 2rem;
+   text-align: center;
+   font-size: 0.925rem;
+   line-height: normal;
+   z-index: 1000;
+}
+
 nav {
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    background-color: var(--nav-bg-color);
diff --git a/demo/components/nav/NavActions.vue b/demo/components/nav/NavActions.vue
new file mode 100644
index 00000000..54adcb60
--- /dev/null
+++ b/demo/components/nav/NavActions.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { entries } = useNotifications()
+
+const { isRunning, startInstance, stopInstance } = useNotivueInstance()
+</script>
+
+<template>
+   <SharedButton
+      @click="push.clearAll()"
+      text="Dismiss All"
+      :isDisabled="entries.length === 0"
+      :key="entries.length"
+   >
+      <IconsDismissIcon />
+   </SharedButton>
+   <SharedButton
+      @click="push.destroyAll()"
+      text="Destroy All"
+      :isDisabled="entries.length === 0"
+      :key="entries.length"
+   >
+      <IconsDestroyIcon />
+   </SharedButton>
+
+   <SharedButton @click="startInstance()" text="Start Instance" :isDisabled="isRunning">
+      <IconsSuccessIcon />
+   </SharedButton>
+   <SharedButton @click="stopInstance()" text="Stop Instance" :isDisabled="!isRunning">
+      <IconsWarnIcon :isWarn="false" />
+   </SharedButton>
+</template>
diff --git a/demo/components/nav/NavNotivueConfig.vue b/demo/components/nav/NavNotivueConfig.vue
index 3db11f8a..6487e0d9 100644
--- a/demo/components/nav/NavNotivueConfig.vue
+++ b/demo/components/nav/NavNotivueConfig.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const config = useNotivue()
 const { queue } = useNotifications()
-const { state, actions } = useStore()
+const { state, actions, messages } = useStore()
 
 function togglePauseOnHover() {
    config.update((prevConf) => ({
@@ -30,11 +30,15 @@ function toggleQueue() {
 }
 
 function toggleNoDupes() {
+   push.destroyAll()
+
    config.update((prevConf) => ({
       avoidDuplicates: !prevConf.avoidDuplicates,
    }))
 
    if (config.avoidDuplicates.value) state.hasProgress = true
+
+   push.success(messages.value.success)
 }
 
 const enqueuedLength = computed(() => queue.value.length)
@@ -105,6 +109,14 @@ const btnProps = {
          No Duplicates
       </button>
 
+      <select class="ButtonBase Select" v-model="config.limit.value" aria-label="Limit">
+         <option selected :value="Infinity">No Limit</option>
+         <option :value="1">Limit - 1</option>
+         <option :value="3">Limit - 3</option>
+         <option :value="5">Limit - 5</option>
+         <option :value="10">Limit - 10</option>
+      </select>
+
       <button
          v-bind="btnProps"
          :aria-checked="config.enqueue.value"
@@ -113,16 +125,6 @@ const btnProps = {
       >
          Enqueue ({{ enqueuedLength }})
       </button>
-
-      <hr />
-
-      <select class="ButtonBase Select" v-model="config.limit.value" aria-label="Limit">
-         <option selected :value="Infinity">No Limit</option>
-         <option :value="1">Limit - 1</option>
-         <option :value="3">Limit - 3</option>
-         <option :value="5">Limit - 5</option>
-         <option :value="10">Limit - 10</option>
-      </select>
    </div>
 </template>
 
@@ -147,10 +149,4 @@ const btnProps = {
    background-repeat: no-repeat;
    background-size: auto 1rem;
 }
-
-hr {
-   margin: 0.25rem 0;
-   border: 0;
-   border-bottom: 1px solid var(--divider-color);
-}
 </style>
diff --git a/demo/components/nav/NavPushBuiltIn.vue b/demo/components/nav/NavPushBuiltIn.vue
index 192dda66..6f2d6a06 100644
--- a/demo/components/nav/NavPushBuiltIn.vue
+++ b/demo/components/nav/NavPushBuiltIn.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-const { state } = useStore()
-const { messages } = useStore()
+const { state, messages } = useStore()
 
 async function asyncRefMessagePush() {
    const initialMessage = ref(state.rtl ? 'جاري تحميل الملفات...' : 'Preparing to upload files...')
diff --git a/demo/components/shared/Button.vue b/demo/components/shared/Button.vue
index 24df2097..3eb03b45 100644
--- a/demo/components/shared/Button.vue
+++ b/demo/components/shared/Button.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
    text: string
+   isDisabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -9,7 +10,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-   <button @click="emit('click')" class="ButtonBase" role="button">
+   <button @click="emit('click')" class="ButtonBase" role="button" :disabled="isDisabled">
       <slot />
       <span>{{ props.text }}</span>
    </button>
diff --git a/demo/nuxt.config.ts b/demo/nuxt.config.ts
index 0c410f47..3109e3cb 100644
--- a/demo/nuxt.config.ts
+++ b/demo/nuxt.config.ts
@@ -3,11 +3,15 @@ import { getHead } from './utils/head'
 export default defineNuxtConfig({
    modules: ['notivue/nuxt'],
    ssr: true,
+   devtools: {
+      enabled: false,
+   },
    experimental: {
       componentIslands: true,
    },
    notivue: {
       // addPlugin: true,
+      // startOnCreation: true,
       notifications: {
          global: {
             // duration: Infinity,
@@ -21,7 +25,12 @@ export default defineNuxtConfig({
       head: getHead(),
    },
    vite: {
+      esbuild: {
+         minifyIdentifiers: !import.meta.env.DEV,
+         minifySyntax: !import.meta.env.DEV,
+      },
       build: {
+         minify: import.meta.env.DEV ? false : 'esbuild',
          cssMinify: 'lightningcss',
       },
       css: {
diff --git a/packages/notivue/Notifications/icons/index.ts b/packages/notivue/Notifications/icons/index.ts
index 76a5ce4e..cade87d2 100644
--- a/packages/notivue/Notifications/icons/index.ts
+++ b/packages/notivue/Notifications/icons/index.ts
@@ -1,6 +1,6 @@
 import { markRaw as raw, type SVGAttributes } from 'vue'
 
-import { NotificationTypeKeys as NKeys } from '@/core/constants'
+import { NotificationTypeKeys as NType } from '@/core/constants'
 
 import SuccessIcon from './SuccessIcon.vue'
 import ErrorIcon from './ErrorIcon.vue'
@@ -34,23 +34,23 @@ export const featherProps: SVGAttributes = {
 }
 
 export const filledIcons: NotivueIcons = {
-   [NKeys.SUCCESS]: raw(SuccessIcon),
-   [NKeys.ERROR]: raw(ErrorIcon),
-   [NKeys.INFO]: raw(InfoIcon),
-   [NKeys.WARNING]: raw(ErrorIcon),
-   [NKeys.PROMISE]: raw(PromiseIcon),
-   [NKeys.PROMISE_RESOLVE]: raw(SuccessIcon),
-   [NKeys.PROMISE_REJECT]: raw(ErrorIcon),
+   [NType.SUCCESS]: raw(SuccessIcon),
+   [NType.ERROR]: raw(ErrorIcon),
+   [NType.INFO]: raw(InfoIcon),
+   [NType.WARNING]: raw(ErrorIcon),
+   [NType.PROMISE]: raw(PromiseIcon),
+   [NType.PROMISE_RESOLVE]: raw(SuccessIcon),
+   [NType.PROMISE_REJECT]: raw(ErrorIcon),
    close: raw(CloseIcon),
 }
 
 export const outlinedIcons: NotivueIcons = {
-   [NKeys.SUCCESS]: raw(SuccessOutlineIcon),
-   [NKeys.ERROR]: raw(ErrorOutlineIcon),
-   [NKeys.INFO]: raw(InfoOutlineIcon),
-   [NKeys.WARNING]: raw(ErrorOutlineIcon),
-   [NKeys.PROMISE]: raw(PromiseIcon),
-   [NKeys.PROMISE_RESOLVE]: raw(SuccessOutlineIcon),
-   [NKeys.PROMISE_REJECT]: raw(ErrorOutlineIcon),
+   [NType.SUCCESS]: raw(SuccessOutlineIcon),
+   [NType.ERROR]: raw(ErrorOutlineIcon),
+   [NType.INFO]: raw(InfoOutlineIcon),
+   [NType.WARNING]: raw(ErrorOutlineIcon),
+   [NType.PROMISE]: raw(PromiseIcon),
+   [NType.PROMISE_RESOLVE]: raw(SuccessOutlineIcon),
+   [NType.PROMISE_REJECT]: raw(ErrorOutlineIcon),
    close: raw(CloseIcon),
 }
diff --git a/packages/notivue/Notifications/types.ts b/packages/notivue/Notifications/types.ts
index dbe6ea4c..e978815c 100644
--- a/packages/notivue/Notifications/types.ts
+++ b/packages/notivue/Notifications/types.ts
@@ -69,3 +69,7 @@ type ThemeVars =
    | WarningColorsVars
    | InfoColorsVars
    | PromiseColorsVars
+
+// New v2.4.0 aliases
+
+export type NotificationProps = NotificationsProps
diff --git a/packages/notivue/Notivue/Notivue.vue b/packages/notivue/Notivue/Notivue.vue
index 3e3ef366..05e5292f 100644
--- a/packages/notivue/Notivue/Notivue.vue
+++ b/packages/notivue/Notivue/Notivue.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useNotivueInstance } from '@/core/useStore'
 import { DEFAULT_PROPS } from './constants'
+
 import { NotivueClientOnly } from '@/shared/ClientOnly'
 
 import NotivueImpl from './NotivueImpl.vue'
@@ -8,12 +10,14 @@ import type { NotivueComponentSlot, NotivueProps } from 'notivue'
 
 const props = withDefaults(defineProps<NotivueProps>(), DEFAULT_PROPS)
 
+const { isRunning } = useNotivueInstance()
+
 defineSlots<NotivueComponentSlot>()
 </script>
 
 <template>
    <NotivueClientOnly>
-      <NotivueImpl v-bind="props" v-slot="item">
+      <NotivueImpl v-bind="props" v-slot="item" v-if="isRunning">
          <slot v-bind="item" />
       </NotivueImpl>
    </NotivueClientOnly>
diff --git a/packages/notivue/Notivue/NotivueImpl.vue b/packages/notivue/Notivue/NotivueImpl.vue
index a1a0a90e..b066f092 100644
--- a/packages/notivue/Notivue/NotivueImpl.vue
+++ b/packages/notivue/Notivue/NotivueImpl.vue
@@ -4,13 +4,16 @@ import { Teleport } from 'vue'
 import AriaLive from './AriaLive.vue'
 
 import { useStore } from '@/core/useStore'
+import { getSlotItem } from '@/core/utils'
+
 import { useMouseEvents } from './composables/useMouseEvents'
 import { useTouchEvents } from './composables/useTouchEvents'
 import { useNotivueStyles } from './composables/useNotivueStyles'
 import { useRepositioning } from './composables/useRepositioning'
 import { useWindowFocus } from './composables/useWindowFocus'
 import { useReducedMotion } from './composables/useReducedMotion'
-import { getSlotItem, getAriaLabel } from './utils'
+
+import { getAriaLabel } from './utils'
 import { DEFAULT_PROPS } from './constants'
 
 import type { NotivueProps, NotivueComponentSlot } from 'notivue'
@@ -43,9 +46,9 @@ useRepositioning()
    >
       <!-- List Container -->
       <ol
-         v-if="items.length > 0"
+         v-if="items.entries.value.length > 0"
          v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value }"
-         :data-notivue-align="config.isTopAlign.value ? 'top' : 'bottom'"
+         :data-notivue-align="config.position.value.split('-')[0]"
          :aria-label="props.listAriaLabel"
          :ref="elements.root"
          :class="props.class"
@@ -53,12 +56,12 @@ useRepositioning()
       >
          <!-- List Item -->
          <li
-            v-for="(item, index) in items.entries.value"
+            v-for="(item, i) in items.entries.value"
             tabindex="-1"
             :key="item.id"
-            :data-notivue-id="item.id"
+            :data-notivue-item="item.id"
             :aria-setsize="items.length"
-            :aria-posinset="index + 1"
+            :aria-posinset="i + 1"
             :ref="elements.items"
             :style="{
                ...styles.listItem,
diff --git a/packages/notivue/Notivue/composables/useResizeListObserver.ts b/packages/notivue/Notivue/composables/useResizeListObserver.ts
index c6e84755..ce9f4508 100644
--- a/packages/notivue/Notivue/composables/useResizeListObserver.ts
+++ b/packages/notivue/Notivue/composables/useResizeListObserver.ts
@@ -3,19 +3,29 @@ import { onMounted, onBeforeUnmount, watch } from 'vue'
 export function useResizeListObserver(elements: HTMLElement[], onSizeChange: () => void) {
    let resizeObserver: ResizeObserver
 
-   const calls = new Set()
+   const calls = new WeakSet()
 
    onMounted(() => {
       resizeObserver = new ResizeObserver((entries, observer) => {
-         entries.forEach((e) => {
+         for (const e of entries) {
             if (!calls.has(e.target)) {
+               // The element is being added to the DOM, skip
                calls.add(e.target)
             } else {
-               onSizeChange()
-               calls.delete(e.target)
-               observer.unobserve(e.target)
+               // The element is being removed from the DOM and its size never changed, remove
+               if (Object.values(e.contentRect.toJSON()).every((val) => val === 0)) {
+                  calls.delete(e.target)
+                  observer.unobserve(e.target)
+               } else {
+                  // The element actually changed size, trigger callback and remove
+                  console.log('ResizeObserver Triggered')
+
+                  onSizeChange()
+                  calls.delete(e.target)
+                  observer.unobserve(e.target)
+               }
             }
-         })
+         }
       })
    })
 
diff --git a/packages/notivue/Notivue/composables/useWindowFocus.ts b/packages/notivue/Notivue/composables/useWindowFocus.ts
index 86f223e1..c558de88 100644
--- a/packages/notivue/Notivue/composables/useWindowFocus.ts
+++ b/packages/notivue/Notivue/composables/useWindowFocus.ts
@@ -3,33 +3,25 @@ import { onMounted, onBeforeUnmount } from 'vue'
 import { useStore } from '@/core/useStore'
 
 export function useWindowFocus() {
-   const { items, config, timeouts } = useStore()
+   const { config, timeouts } = useStore()
 
-   function onWinFocus() {
+   function onFocus() {
       if (timeouts.isStreamFocused.value) return
-
-      if (config.pauseOnTabChange.value) {
-         timeouts.resume()
-      }
+      if (config.pauseOnTabChange.value) timeouts.resume()
    }
 
-   function onWinBlur() {
+   function onBlur() {
       if (timeouts.isStreamFocused.value) return
-
-      if (config.pauseOnTabChange.value) {
-         timeouts.pause()
-      } else {
-         items.clear()
-      }
+      if (config.pauseOnTabChange.value) timeouts.pause()
    }
 
    onMounted(() => {
-      window.addEventListener('focus', onWinFocus)
-      window.addEventListener('blur', onWinBlur)
+      window.addEventListener('focus', onFocus)
+      window.addEventListener('blur', onBlur)
    })
 
    onBeforeUnmount(() => {
-      window.removeEventListener('focus', onWinFocus)
-      window.removeEventListener('blur', onWinBlur)
+      window.removeEventListener('focus', onFocus)
+      window.removeEventListener('blur', onBlur)
    })
 }
diff --git a/packages/notivue/Notivue/utils.ts b/packages/notivue/Notivue/utils.ts
index d604e3bd..4b61f63a 100644
--- a/packages/notivue/Notivue/utils.ts
+++ b/packages/notivue/Notivue/utils.ts
@@ -1,20 +1,4 @@
-import type { StoreItem, NotivueItem, HiddenInternalItemData } from 'notivue'
-
-export const hiddenInternalKeys: (keyof HiddenInternalItemData)[] = [
-   'timeout',
-   'resumedAt',
-   'remaining',
-   'animationAttrs',
-   'positionStyles',
-]
-
-export function getSlotItem(item: StoreItem): NotivueItem {
-   return Object.fromEntries(
-      Object.entries(item).filter(
-         ([key]) => !hiddenInternalKeys.includes(key as keyof HiddenInternalItemData)
-      )
-   ) as NotivueItem
-}
+import type { NotivueItem } from 'notivue'
 
 export function getAriaLabel(item: NotivueItem) {
    return `${item.title ? `${item.title}: ` : ''}${item.message}`
diff --git a/packages/notivue/NotivueKeyboard/NotivueKeyboard.vue b/packages/notivue/NotivueKeyboard/NotivueKeyboard.vue
index 076ece2a..695ed1ee 100644
--- a/packages/notivue/NotivueKeyboard/NotivueKeyboard.vue
+++ b/packages/notivue/NotivueKeyboard/NotivueKeyboard.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
-import { NotivueClientOnly } from '@/shared/ClientOnly'
+import { useNotivueInstance } from '@/core/useStore'
 import { DEFAULT_PROPS } from './constants'
 
+import { NotivueClientOnly } from '@/shared/ClientOnly'
+
 import NotivueKeyboardImpl from './NotivueKeyboardImpl.vue'
 
-import type { NotivueKeyboardSlot, NotivueKeyboardProps } from 'notivue'
+import { type NotivueKeyboardSlot, type NotivueKeyboardProps } from 'notivue'
 
 const props = withDefaults(defineProps<NotivueKeyboardProps>(), DEFAULT_PROPS)
 
+const { isRunning } = useNotivueInstance()
+
 defineSlots<NotivueKeyboardSlot>()
 </script>
 
 <template>
    <NotivueClientOnly>
-      <NotivueKeyboardImpl v-bind="props" v-slot="{ containersTabIndex, elementsTabIndex }">
+      <NotivueKeyboardImpl
+         v-bind="props"
+         v-slot="{ containersTabIndex, elementsTabIndex }"
+         v-if="isRunning"
+      >
          <slot v-bind="{ containersTabIndex, elementsTabIndex }" />
       </NotivueKeyboardImpl>
    </NotivueClientOnly>
diff --git a/packages/notivue/astro/Notivue.vue b/packages/notivue/astro/Notivue.vue
index 0c150a32..d65458d6 100644
--- a/packages/notivue/astro/Notivue.vue
+++ b/packages/notivue/astro/Notivue.vue
@@ -17,7 +17,7 @@ function onPush(e: CustomEvent<PushAstroEvent>) {
    // Create the notification as usual
    const notification = push[e.detail.type](e.detail)
 
-   // Dispatch the push result
+   // Dispatch the result
    window.dispatchEvent(
       new CustomEvent(e.detail.resultEventName, {
          detail: notification,
diff --git a/packages/notivue/astro/push.ts b/packages/notivue/astro/push.ts
index fcdfdd22..be0125b0 100644
--- a/packages/notivue/astro/push.ts
+++ b/packages/notivue/astro/push.ts
@@ -1,27 +1,25 @@
 import type { PushOptions } from 'notivue'
 import type { PushAstroEvent, MaybeAstroPushPromiseReturn } from './types'
 
-let eventId = 0
-
 export function pushEvent<T extends Omit<PushAstroEvent, 'resultEventName'>>(
    detail: T
 ): MaybeAstroPushPromiseReturn<T> {
-   eventId++
+   const eventId = Date.now()
 
-   // Listen for the result of the notification that will be created by NotivueAstro...
+   // Prepare to listen for the result of the notification that will be created by NotivueAstro...
    let pushResult = {} as MaybeAstroPushPromiseReturn<T>
    const resultEventName = `notivue:id:${eventId}`
 
    // ...upon receival, save the result and remove the listener
-   window.addEventListener(resultEventName, saveResult as EventListener, {
-      once: true,
-   })
-
-   function saveResult(e: CustomEvent<MaybeAstroPushPromiseReturn<T>>) {
-      pushResult = e.detail
-   }
+   window.addEventListener(
+      resultEventName,
+      ((e: CustomEvent<MaybeAstroPushPromiseReturn<T>>) => {
+         pushResult = e.detail
+      }) as EventListener,
+      { once: true }
+   )
 
-   // Dispatch the incoming push options to the receiver to create the notification
+   // Dispatch the incoming push options to NotivueAstro to create the notification
    window.dispatchEvent(
       new CustomEvent('notivue:push', {
          detail: {
@@ -32,6 +30,7 @@ export function pushEvent<T extends Omit<PushAstroEvent, 'resultEventName'>>(
       })
    )
 
+   // Return the result
    return pushResult
 }
 
diff --git a/packages/notivue/core/createNotivue.ts b/packages/notivue/core/createNotivue.ts
index a13c116c..488b74bd 100644
--- a/packages/notivue/core/createNotivue.ts
+++ b/packages/notivue/core/createNotivue.ts
@@ -1,8 +1,9 @@
 import type { App, InjectionKey, Plugin } from 'vue'
-import type { NotivueConfig, NotivueStore } from 'notivue'
+import type { NotivueConfig, NotivueInstance, NotivueStore, Push } from 'notivue'
 
-import { setPush, createPush } from './createPush'
-import { createWatchers } from './createWatchers'
+import { ref, readonly } from 'vue'
+import { setPush, createPush, createPushMock } from './createPush'
+import { createStoreWatchers } from './createStoreWatchers'
 import {
    createConfig,
    createQueue,
@@ -13,31 +14,86 @@ import {
    createPushProxies,
 } from './createStore'
 
+export const notivueInstanceInjectionKey = Symbol('') as InjectionKey<NotivueInstance>
 export const notivueInjectionKey = Symbol('') as InjectionKey<NotivueStore>
 
-export function createNotivue(userConfig: NotivueConfig = {}): Plugin {
-   const config = createConfig(userConfig)
-   const queue = createQueue()
-   const items = createItems(config, queue)
-   const elements = createElements()
-   const animations = createAnimations(config, items, elements)
-   const timeouts = createTimeouts(items, animations)
+export function createNotivue(
+   pluginConfig: NotivueConfig & {
+      startOnCreation?: boolean
+   } = {}
+): Plugin {
+   return {
+      install(app: App) {
+         const { startOnCreation = true, ...userConfig } = pluginConfig
 
-   const store = { config, queue, items, elements, animations, timeouts }
+         const { isRunning, runInstance } = createInstance(startOnCreation)
 
-   const proxies = createPushProxies(store)
-   const push = Object.freeze(createPush(proxies))
+         const config = createConfig(userConfig, isRunning)
+         const queue = createQueue()
+         const items = createItems(config, queue)
+         const elements = createElements()
+         const animations = createAnimations(config, items, queue, elements)
+         const timeouts = createTimeouts(items, animations)
 
-   setPush(push)
+         const store = { config, queue, items, elements, animations, timeouts }
 
-   createWatchers(store)
+         const proxies = createPushProxies(store)
+         const push = Object.freeze(createPush(proxies))
 
-   const notivue = {
-      install(app: App) {
-         app.config.globalProperties.$push = push
+         const instance = runInstance(store, push)
+
+         app.provide(notivueInstanceInjectionKey, instance)
          app.provide(notivueInjectionKey, store)
+
+         app.config.globalProperties.$push ||= push
       },
    }
+}
+
+export let startInstance: () => void = () => {}
+export let stopInstance: () => void = () => {}
+
+function createInstance(startOnCreation: boolean) {
+   const isRunning = ref(startOnCreation)
+   const isRunningReadonly = readonly(isRunning)
+
+   function runInstance(store: NotivueStore, push: Push) {
+      const watchStore = () => createStoreWatchers(store)
+
+      if (startOnCreation) setPush(push)
+
+      let unwatchStore = startOnCreation ? watchStore() : () => {}
+
+      const instance = {
+         isRunning: isRunningReadonly,
+         startInstance() {
+            if (isRunning.value) return
+
+            unwatchStore = watchStore()
+            setPush(push)
+
+            isRunning.value = true
+         },
+         stopInstance() {
+            if (!isRunning.value) return
+
+            store.items.clear()
+            store.queue.clear()
+            store.items.resetCount()
+            store.animations.resetTransitionStyles()
+
+            setPush(createPushMock())
+            unwatchStore()
+
+            isRunning.value = false
+         },
+      }
+
+      startInstance = () => instance.startInstance()
+      stopInstance = () => instance.stopInstance()
+
+      return instance
+   }
 
-   return notivue
+   return { isRunning: isRunningReadonly, runInstance }
 }
diff --git a/packages/notivue/core/createPush.ts b/packages/notivue/core/createPush.ts
index 9afd13c3..d3bb0fc7 100644
--- a/packages/notivue/core/createPush.ts
+++ b/packages/notivue/core/createPush.ts
@@ -1,4 +1,4 @@
-import { NotificationTypeKeys as NKeys } from './constants'
+import { NotificationTypeKeys as NType } from './constants'
 import { createPushProxies } from './createStore'
 
 import type { NotificationType, Push, PushParameter } from 'notivue'
@@ -25,18 +25,18 @@ export function createPush(proxies: ReturnType<typeof createPushProxies>): Push
    }
 
    return {
-      success: (options) => push(options, NKeys.SUCCESS),
-      error: (options) => push(options, NKeys.ERROR),
-      warning: (options) => push(options, NKeys.WARNING),
-      info: (options) => push(options, NKeys.INFO),
+      success: (options) => push(options, NType.SUCCESS),
+      error: (options) => push(options, NType.ERROR),
+      warning: (options) => push(options, NType.WARNING),
+      info: (options) => push(options, NType.INFO),
       promise: (options) => {
-         const { id, clear, destroy } = push(options, NKeys.PROMISE)
+         const { id, clear, destroy } = push(options, NType.PROMISE)
 
          return {
-            resolve: (options) => push(options, NKeys.PROMISE_RESOLVE, id),
-            reject: (options) => push(options, NKeys.PROMISE_REJECT, id),
-            success: (options) => push(options, NKeys.PROMISE_RESOLVE, id),
-            error: (options) => push(options, NKeys.PROMISE_REJECT, id),
+            resolve: (options) => push(options, NType.PROMISE_RESOLVE, id),
+            reject: (options) => push(options, NType.PROMISE_REJECT, id),
+            success: (options) => push(options, NType.PROMISE_RESOLVE, id),
+            error: (options) => push(options, NType.PROMISE_REJECT, id),
             clear,
             destroy,
          }
diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts
index 7ec552ec..077b7cb4 100644
--- a/packages/notivue/core/createStore.ts
+++ b/packages/notivue/core/createStore.ts
@@ -1,15 +1,14 @@
-import { ref, shallowRef, computed, triggerRef, nextTick, unref, isRef } from 'vue'
+import { ref, shallowRef, triggerRef, unref, isRef, type Ref } from 'vue'
 
 import {
-   createRefs,
+   createConfigRefs,
    mergeDeep,
    mergeNotificationOptions as mergeOptions,
    toRawConfig,
 } from './utils'
-import { getSlotItem } from '@/Notivue/utils'
 
-import { isStatic } from './utils'
-import { DEFAULT_CONFIG, NotificationTypeKeys as NKeys } from './constants'
+import { isStatic, getSlotItem } from './utils'
+import { DEFAULT_CONFIG, NotificationTypeKeys as NType } from './constants'
 
 import type {
    DeepPartial,
@@ -28,25 +27,30 @@ import type {
 
 export let updateConfig: (newConfig: UpdateParam) => void = () => {}
 
-export function createConfig(userConfig: NotivueConfig) {
-   const config = createRefs(DEFAULT_CONFIG, userConfig)
-   const isTopAlign = computed(() => config.position.value.startsWith('top'))
+export function createConfig(userConfig: NotivueConfig, isRunning: Readonly<Ref<boolean>>) {
+   const config = createConfigRefs(DEFAULT_CONFIG, userConfig, isRunning)
 
    function update(newConfig: UpdateParam) {
-      if (typeof newConfig === 'function') newConfig = newConfig(toRawConfig(config))
+      if (!isRunning.value) return
 
-      for (const key of Object.keys(newConfig) as (keyof NotivueConfig)[]) {
-         if (typeof config[key].value === 'object') {
-            config[key].value = mergeDeep(config[key].value as Obj, newConfig[key] as any)
+      if (typeof newConfig === 'function') {
+         newConfig = newConfig(toRawConfig(config))
+      }
+
+      for (const key in newConfig) {
+         type K = keyof NotivueConfig
+
+         if (typeof config[key as K].value === 'object') {
+            config[key as K].value = mergeDeep(config[key as K].value as Obj, newConfig[key as K] as any) // prettier-ignore
          } else {
-            config[key].value = newConfig[key] as any
+            config[key as K].value = newConfig[key as K] as any
          }
       }
    }
 
    updateConfig = update
 
-   return { ...config, isTopAlign, update }
+   return { ...config, update }
 }
 
 export function createQueue() {
@@ -63,14 +67,15 @@ export function createQueue() {
          return this.entries.value.find((e) => e.id === id)
       },
       update(id: string, newOptions: DeepPartial<StoreItem>) {
-         Object.assign(this.get(id) ?? {}, newOptions)
-      },
-      triggerRef() {
-         triggerRef(this.entries)
+         const entry = this.get(id)
+         if (entry) Object.assign(entry, newOptions)
       },
       remove(id: string) {
          this.entries.value = this.entries.value.filter((e) => e.id !== id)
       },
+      triggerRef() {
+         triggerRef(this.entries)
+      },
       clear() {
          this.entries.value = []
       },
@@ -79,12 +84,30 @@ export function createQueue() {
 
 export function createItems(config: ConfigSlice, queue: QueueSlice) {
    return {
+      createdCount: ref(0),
+      addCreated() {
+         this.createdCount.value++
+      },
+      clearedCount: ref(0),
+      addCleared() {
+         this.clearedCount.value++
+      },
+      destroyedCount: ref(0),
+      addDestroyed() {
+         this.destroyedCount.value++
+      },
+      resetCount() {
+         this.createdCount.value = 0
+         this.clearedCount.value = 0
+         this.destroyedCount.value = 0
+      },
       entries: shallowRef<StoreItem[]>([]),
       get length() {
          return this.entries.value.length
       },
       add(item: StoreItem) {
          this.entries.value.unshift(item)
+         this.addCreated()
          this.triggerRef()
       },
       addFromQueue() {
@@ -109,25 +132,23 @@ export function createItems(config: ConfigSlice, queue: QueueSlice) {
          return this.entries.value.find((e) => e.id === id)
       },
       update(id: string, newOptions: DeepPartial<StoreItem>) {
-         Object.assign(this.get(id) ?? {}, newOptions)
+         const entry = this.get(id)
+         if (entry) Object.assign(entry, newOptions)
       },
       triggerRef() {
          triggerRef(this.entries)
       },
-      updateAll(updateItem: (item: StoreItem) => StoreItem) {
-         this.entries.value = this.entries.value.map(updateItem)
+      updateAll(updateFn: (item: StoreItem) => StoreItem) {
+         this.entries.value = this.entries.value.map(updateFn)
       },
       remove(id: string) {
          this.entries.value = this.entries.value.filter((e) => e.id !== id)
 
          const shouldDequeue = queue.length > 0 && this.length < config.limit.value
-         if (shouldDequeue) {
-            nextTick(() => this.addFromQueue())
-         }
+         if (shouldDequeue) this.addFromQueue()
       },
       clear() {
          this.entries.value = []
-         queue.clear()
       },
    }
 }
@@ -144,58 +165,70 @@ export function createElements() {
       items: ref<HTMLElement[]>([]),
       getSortedItems() {
          // This is a bit dirty, but it's better than cloning and reversing the array on every repositioning
-         return this.items.value.sort((a, b) => +b.dataset.notivueId! - +a.dataset.notivueId!)
+         return this.items.value.sort((a, b) => +b.dataset.notivueItem! - +a.dataset.notivueItem!)
       },
       containers: ref<HTMLElement[]>([]),
    }
 }
 
-export function createAnimations(config: ConfigSlice, items: ItemsSlice, elements: ElementsSlice) {
-   type TransitionData = { duration: string; easing: string }
+export function createAnimations(
+   config: ConfigSlice,
+   items: ItemsSlice,
+   queue: QueueSlice,
+   elements: ElementsSlice
+) {
+   type TransitionStyles = { transitionDuration: string; transitionTimingFunction: string }
 
    return {
       isReducedMotion: ref(false),
-      transitionData: null as null | TransitionData,
+      transitionStyles: null as null | TransitionStyles,
       setReducedMotion(newVal: boolean) {
          this.isReducedMotion.value = newVal
       },
-      getTransitionData() {
-         if (!this.transitionData) this.setTransitionData()
-         return this.transitionData as TransitionData
+      getTransitionStyles() {
+         if (!this.transitionStyles) this.syncTransitionStyles()
+         return this.transitionStyles
       },
-      resetTransitionData() {
-         this.transitionData = null
+      resetTransitionStyles() {
+         this.transitionStyles = null
       },
-      setTransitionData() {
+      syncTransitionStyles() {
+         const mountedRoot = elements.root.value
+         if (!mountedRoot) return // If the root is not yet queryable, try to sync the next push
+
          const enterClass = config.animations.value.enter
-         const animEl = enterClass ? elements.root.value?.querySelector(`.${enterClass}`) : null
+         const animEl = enterClass ? mountedRoot.querySelector(`.${enterClass}`) : null
+
+         console.log('Syncing transition styles')
 
          if (!animEl) {
-            this.transitionData = { duration: '0s', easing: 'ease' }
+            this.transitionStyles = { transitionDuration: '0s', transitionTimingFunction: 'ease' }
          } else {
-            const style = window.getComputedStyle(animEl)
+            const styles = window.getComputedStyle(animEl)
 
-            this.transitionData = {
-               duration: style.animationDuration,
-               easing: style.animationTimingFunction,
+            this.transitionStyles = {
+               transitionDuration: styles.animationDuration,
+               transitionTimingFunction: styles.animationTimingFunction,
             }
          }
       },
       playLeave(id: string, { isDestroy = false, isUserTriggered = false } = {}) {
+         const { leave = '' } = config.animations.value
          const item = items.get(id)
 
          window.clearTimeout(item?.timeout as number)
 
-         function onAnimationend(e?: AnimationEvent) {
+         const onAnimationend = (e?: AnimationEvent) => {
             if (e && e.currentTarget !== e.target) return
 
-            items.remove(id)
             item?.[isUserTriggered ? 'onManualClear' : 'onAutoClear']?.(getSlotItem(item))
+            items.remove(id)
          }
 
-         const { leave = '' } = config.animations.value
-
-         if (!item || !leave || isDestroy || this.isReducedMotion.value) return onAnimationend()
+         if (!item || !leave || isDestroy || this.isReducedMotion.value) {
+            items.addDestroyed()
+            return onAnimationend()
+         }
 
          items.update(id, {
             positionStyles: {
@@ -208,46 +241,52 @@ export function createAnimations(config: ConfigSlice, items: ItemsSlice, element
             },
          })
 
-         this.updatePositions()
+         items.addCleared()
       },
       playClearAll() {
+         items.entries.value.forEach((e) => window.clearTimeout(e.timeout as number))
+
          const { clearAll = '' } = config.animations.value
 
-         items.entries.value.forEach((e) => window.clearTimeout(e.timeout as number))
+         const onAnimationend = () => {
+            queue.clear()
+            items.clear()
+         }
 
-         if (!clearAll || this.isReducedMotion.value) return items.clear()
+         if (!clearAll || this.isReducedMotion.value) return onAnimationend()
 
          elements.setRootAttrs({
             class: clearAll,
-            onAnimationend: () => items.clear(),
+            onAnimationend,
          })
       },
       updatePositions({ isImmediate = false } = {}) {
+         const transitionStyles = this.getTransitionStyles()
+         if (!transitionStyles) return
+
+         console.log('Updating positions')
+
          const isReduced = this.isReducedMotion.value || isImmediate
+         const isTopAlign = config.position.value.indexOf('top') === 0
          const leaveClass = config.animations.value.leave
 
          let accPrevHeights = 0
 
          for (const el of elements.getSortedItems()) {
-            const id = el.dataset.notivueId!
+            const id = el.dataset.notivueItem!
             const item = items.get(id)
 
-            if (!el || !item || item.animationAttrs.class === leaveClass) continue
-
-            const { duration: transitionDuration, easing: transitionTimingFunction } =
-               this.getTransitionData()
+            if (!el || !item || item.animationAttrs.class === leaveClass) continue // prettier-ignore
 
             items.update(id, {
                positionStyles: {
                   willChange: 'transform',
                   transform: `translate3d(0, ${accPrevHeights}px, 0)`,
-                  ...(isReduced
-                     ? { transition: 'none' }
-                     : { transitionDuration, transitionTimingFunction }),
+                  ...(isReduced ? { transition: 'none' } : transitionStyles),
                },
             })
 
-            accPrevHeights += (config.isTopAlign.value ? 1 : -1) * el.clientHeight
+            accPrevHeights += (isTopAlign ? 1 : -1) * el.clientHeight
          }
 
          items.triggerRef()
@@ -327,7 +366,7 @@ export function createTimeouts(items: ItemsSlice, animations: AnimationsSlice) {
             return {
                ...item,
                timeout: this.create(item.id, item.remaining ?? item.duration),
-               resumedAt: Date.now(), // ...which corresponds to the duration itself when the stream is resumed for the first time
+               resumedAt: Date.now(), // ...which corresponds to the item duration when the stream is resumed for the first time
             }
          })
       },
@@ -354,6 +393,7 @@ export function createPushProxies({
 }) {
    return {
       destroyAll() {
+         queue.clear()
          items.clear()
       },
       clearAll() {
@@ -397,6 +437,8 @@ export function createPushProxies({
                   createdAt,
                   duplicateCount: queueDupe.duplicateCount + 1,
                })
+
+               queue.triggerRef() // This is actually not needed...
             }
 
             if (queueDupe || dupe) return
@@ -404,10 +446,10 @@ export function createPushProxies({
 
          const createTimeout = () => timeouts.create(entry.id, entry.duration)
 
-         if (options.type === NKeys.PROMISE_RESOLVE || options.type === NKeys.PROMISE_REJECT) {
+         if (options.type === NType.PROMISE_RESOLVE || options.type === NType.PROMISE_REJECT) {
             if (queue.get(entry.id)) {
                queue.update(entry.id, { ...entry, createdAt, timeout: createTimeout })
-               queue.triggerRef()
+               queue.triggerRef() // ...but we're exposing the queue `useNotifications` so this is needed
             } else {
                items.update(entry.id, { ...entry, createdAt, timeout: createTimeout() })
                items.triggerRef()
diff --git a/packages/notivue/core/createWatchers.ts b/packages/notivue/core/createStoreWatchers.ts
similarity index 55%
rename from packages/notivue/core/createWatchers.ts
rename to packages/notivue/core/createStoreWatchers.ts
index 1ef9a3ac..c40745a8 100644
--- a/packages/notivue/core/createWatchers.ts
+++ b/packages/notivue/core/createStoreWatchers.ts
@@ -2,24 +2,28 @@ import { watch } from 'vue'
 
 import type { NotivueStore } from 'notivue'
 
-export function createWatchers(store: NotivueStore) {
-   watch(
-      store.config.isTopAlign,
+export function createStoreWatchers(store: NotivueStore) {
+   const unwatchCount = watch(
+      () => [
+         store.items.createdCount.value,
+         store.items.clearedCount.value,
+         store.items.destroyedCount.value,
+      ],
       () => {
-         store.animations.updatePositions({ isImmediate: true })
+         store.animations.updatePositions()
       },
       { flush: 'post' }
    )
 
-   watch(
-      () => store.items.length,
+   const unwatchPosition = watch(
+      store.config.position,
       () => {
-         store.animations.updatePositions()
+         store.animations.updatePositions({ isImmediate: true })
       },
       { flush: 'post' }
    )
 
-   watch(
+   const unwatchRoot = watch(
       () => store.items.length === 0 && store.queue.length === 0,
       (isReset) => {
          if (isReset) {
@@ -30,12 +34,19 @@ export function createWatchers(store: NotivueStore) {
       { flush: 'post' }
    )
 
-   watch(
+   const unwatchAnimations = watch(
       () => store.config.animations.value.enter,
       (newEnter, prevEnter) => {
          if (newEnter !== prevEnter) {
-            store.animations.resetTransitionData()
+            store.animations.resetTransitionStyles()
          }
       }
    )
+
+   return () => {
+      unwatchCount()
+      unwatchPosition()
+      unwatchRoot()
+      unwatchAnimations()
+   }
 }
diff --git a/packages/notivue/core/types.ts b/packages/notivue/core/types.ts
index 1b897de8..faeda540 100644
--- a/packages/notivue/core/types.ts
+++ b/packages/notivue/core/types.ts
@@ -41,7 +41,11 @@ export type Position =
    | 'bottom-center'
    | 'bottom-right'
 
-export type NotivueAnimations = { enter?: string; leave?: string; clearAll?: string }
+export interface NotivueAnimations {
+   enter?: string
+   leave?: string
+   clearAll?: string
+}
 
 export interface NotificationOptions {
    /** String to use as default title, an empty string doesn't render the title. */
@@ -179,7 +183,6 @@ export interface Push {
 }
 
 export type ConfigSlice = ToRefs<NotivueConfigRequired> & {
-   isTopAlign: ComputedRef<boolean>
    update: (newConfig: UpdateParam) => void
 }
 
@@ -189,7 +192,13 @@ export type QueueSlice = ReturnType<typeof createQueue>
 export type ItemsSlice = ReturnType<typeof createItems>
 export type ElementsSlice = ReturnType<typeof createElements>
 
-export type NotivueStore = {
+export interface NotivueInstance {
+   isRunning: Readonly<Ref<boolean>>
+   startInstance: () => void
+   stopInstance: () => void
+}
+
+export interface NotivueStore {
    config: ConfigSlice
    animations: AnimationsSlice
    timeouts: TimeoutsSlice
@@ -205,7 +214,10 @@ export interface NotivueComputedEntries {
 
 // New v2.1.0 aliases
 
-export type UseNotivueReturn = ConfigSlice & { isStreamPaused: Readonly<Ref<boolean>> }
+export type UseNotivueReturn = ConfigSlice & {
+   isStreamPaused: Readonly<Ref<boolean>>
+   isTopAlign: ComputedRef<boolean>
+}
 
 export type NotivueNotificationOptions = NotificationOptions
 export type NotivuePosition = Position
@@ -215,6 +227,10 @@ export type NotivueNotificationType = NotificationType
 
 export type PushClearMethods = NotificationClearMethods
 
+// New v2.4.0 aliases
+
+export type NotificationTypes = NotificationType
+
 // Aliases prev 1.2.0
 
 export type NotivueSlot = NotivueItem
diff --git a/packages/notivue/core/useStore.ts b/packages/notivue/core/useStore.ts
index 3e3636e6..45532178 100644
--- a/packages/notivue/core/useStore.ts
+++ b/packages/notivue/core/useStore.ts
@@ -1,19 +1,47 @@
 import { inject, computed, toRefs, reactive, readonly, ref } from 'vue'
 
-import { isSSR } from './utils'
-import { notivueInjectionKey } from './createNotivue'
+import { isSSR, getSlotItem } from './utils'
+import { notivueInjectionKey, notivueInstanceInjectionKey } from './createNotivue'
 import { push } from './createPush'
 import { DEFAULT_CONFIG } from './constants'
 
-import { getSlotItem } from '@/Notivue/utils'
-
-import type { NotivueStore, UseNotivueReturn, NotivueComputedEntries, NotivueItem } from 'notivue'
+import type {
+   NotivueStore,
+   UseNotivueReturn,
+   NotivueComputedEntries,
+   NotivueInstance,
+} from 'notivue'
 
 export function useStore() {
    return inject(notivueInjectionKey) as NotivueStore
 }
 
 /**
+ * Composable to start and stop the Notivue instance.
+ *
+ * @returns
+ *
+ * - `startInstance` - Starts or restarts the Notivue instance.
+ * - `stopInstance` - Stops the Notivue instance.
+ * - `isRunning` - Readonly ref to check if the Notivue instance is running.
+ *
+ * @docs https://notivuedocs.netlify.app/api/use-notivue-instance
+ */
+export function useNotivueInstance(): NotivueInstance {
+   if (isSSR) {
+      return {
+         isRunning: ref(true),
+         startInstance: () => {},
+         stopInstance: () => {},
+      } as NotivueInstance
+   }
+
+   return inject(notivueInstanceInjectionKey) as NotivueInstance
+}
+
+/**
+ * Composable to get and update the current Notivue config.
+ *
  * @returns
  *
  * The current [configuration](https://notivuedocs.netlify.app/customization/configuration)
@@ -26,13 +54,19 @@ export function useNotivue(): UseNotivueReturn {
    if (isSSR) {
       return {
          ...toRefs(reactive(DEFAULT_CONFIG)),
-         isTopAlign: computed(() => true),
-         isStreamPaused: readonly(ref(false)),
          update: () => {},
+         isTopAlign: computed(() => true),
+         isStreamPaused: ref(false),
       } as UseNotivueReturn
    }
 
-   return { ...useStore().config, isStreamPaused: readonly(useStore().timeouts.isStreamPaused) }
+   const store = useStore()
+
+   return {
+      ...store.config,
+      isStreamPaused: readonly(store.timeouts.isStreamPaused),
+      isTopAlign: computed(() => store.config.position.value.indexOf('top') === 0),
+   }
 }
 
 /**
@@ -49,6 +83,8 @@ export function usePush() {
 }
 
 /**
+ * Composable to get the current displayed notifications and queue.
+ *
  * @returns
  *
  * Object of two computed properties:
@@ -61,9 +97,9 @@ export function usePush() {
 export function useNotifications(): NotivueComputedEntries {
    if (isSSR) {
       return {
-         entries: computed(() => [] as NotivueItem[]),
-         queue: computed(() => [] as NotivueItem[]),
-      }
+         entries: computed(() => []),
+         queue: computed(() => []),
+      } as NotivueComputedEntries
    }
 
    const store = useStore()
diff --git a/packages/notivue/core/utils.ts b/packages/notivue/core/utils.ts
index 08287235..783b387f 100644
--- a/packages/notivue/core/utils.ts
+++ b/packages/notivue/core/utils.ts
@@ -1,8 +1,11 @@
-import { reactive, toRaw, toRefs, type ToRefs } from 'vue'
+import { toRaw, customRef, type Ref, type ToRefs } from 'vue'
 
-import { NotificationTypeKeys as NKeys } from './constants'
+import { NotificationTypeKeys as NType } from './constants'
 
 import type {
+   StoreItem,
+   NotivueItem,
+   HiddenInternalItemData as InternalKeys,
    NotificationType,
    NotivueConfigRequired,
    Obj,
@@ -11,9 +14,7 @@ import type {
 
 export const isSSR = typeof window === 'undefined'
 
-export function isMouse(event: PointerEvent) {
-   return event.pointerType === 'mouse'
-}
+export const isMouse = (e: PointerEvent) => e.pointerType === 'mouse'
 
 export function mergeDeep<T extends Obj>(target: T, source: Record<string, any>): T {
    const merged: T = { ...target }
@@ -41,7 +42,7 @@ export function mergeNotificationOptions<T extends Obj = Obj>(
       ...configOptions[pushOptions.type],
       ...configOptions.global,
       ...pushOptions,
-      ...(pushOptions.type === 'promise' ? { duration: Infinity } : {}), // Force duration infinity
+      ...(pushOptions.type === 'promise' ? { duration: Infinity } : {}), // Enforce this
    }
 }
 
@@ -55,8 +56,30 @@ function isPlainObject(value: unknown) {
    return prototype === null || Object.getPrototypeOf(prototype) === null
 }
 
-export function createRefs<T extends Obj>(target: T, source: Record<string, any>) {
-   return toRefs(reactive(mergeDeep(target, source))) as ToRefs<T>
+export function createConfigRefs<T extends Obj>(
+   target: T,
+   source: Record<string, any>,
+   isRunning: Ref<boolean>
+) {
+   const conf = mergeDeep(target, source) as T
+
+   function configRef<T>(value: T) {
+      return customRef((track, trigger) => ({
+         get() {
+            track()
+            return value
+         },
+         set(newValue) {
+            if (!isRunning.value) return
+
+            value = newValue
+            trigger()
+         },
+      }))
+   }
+
+   for (const key in conf) conf[key] = configRef(conf[key]) as any
+   return conf as ToRefs<T>
 }
 
 export function toRawConfig<T extends Obj>(config: ToRefs<T>) {
@@ -67,4 +90,18 @@ export function toRawConfig<T extends Obj>(config: ToRefs<T>) {
 }
 
 export const isStatic = (type: NotificationType) =>
-   type === NKeys.SUCCESS || type === NKeys.ERROR || type === NKeys.WARNING || type === NKeys.INFO
+   type === NType.SUCCESS || type === NType.ERROR || type === NType.WARNING || type === NType.INFO
+
+export const internalKeys: (keyof InternalKeys)[] = [
+   'timeout',
+   'resumedAt',
+   'remaining',
+   'animationAttrs',
+   'positionStyles',
+]
+
+export function getSlotItem(item: StoreItem) {
+   return Object.fromEntries(
+      Object.entries(item).filter(([key]) => !internalKeys.includes(key as keyof InternalKeys))
+   ) as NotivueItem
+}
diff --git a/packages/notivue/index.ts b/packages/notivue/index.ts
index 44d12d60..8803f365 100644
--- a/packages/notivue/index.ts
+++ b/packages/notivue/index.ts
@@ -1,23 +1,24 @@
+export { push } from '@/core/createPush'
+export { push as pushAstro } from './astro/push'
+
+export { updateConfig } from '@/core/createStore'
 export { createNotivue } from '@/core/createNotivue'
 
-export { usePush, useNotivue, useNotifications } from '@/core/useStore'
+export { startInstance, stopInstance } from '@/core/createNotivue'
+
+export { usePush, useNotivue, useNotifications, useNotivueInstance } from '@/core/useStore'
+export { useNotivueKeyboard } from '@/NotivueKeyboard/useNotivueKeyboard'
 
 export { default as Notivue } from '@/Notivue/Notivue.vue'
 export { default as NotivueAstro } from './astro/Notivue.vue'
-
 export { default as NotivueSwipe } from '@/NotivueSwipe/NotivueSwipe.vue'
-
-export { push } from '@/core/createPush'
-export { push as pushAstro } from './astro/push'
-
-export { updateConfig } from './core/createStore'
-
 export { default as NotivueKeyboard } from '@/NotivueKeyboard/NotivueKeyboard.vue'
-export { useNotivueKeyboard } from '@/NotivueKeyboard/useNotivueKeyboard'
 
 export { default as Notifications } from '@/Notifications/Notification.vue'
 export { default as Notification } from '@/Notifications/Notification.vue'
 export { default as NotificationProgress } from '@/Notifications/NotificationProgress.vue'
+export { default as NotificationsProgress } from '@/Notifications/NotificationProgress.vue'
+
 export {
    lightTheme,
    pastelTheme,
@@ -25,13 +26,14 @@ export {
    darkTheme,
    slateTheme,
 } from '@/Notifications/themes'
+
 export { filledIcons, outlinedIcons } from '@/Notifications/icons'
 
 export { DEFAULT_CONFIG } from '@/core/constants'
 
-export * from './core/types'
-export * from './Notivue/types'
-export * from './NotivueSwipe/types'
-export * from './NotivueKeyboard/types'
-export * from './Notifications/types'
+export * from '@/core/types'
+export * from '@/Notivue/types'
+export * from '@/NotivueSwipe/types'
+export * from '@/NotivueKeyboard/types'
+export * from '@/Notifications/types'
 export * from './astro/types'
diff --git a/packages/notivue/nuxt/README.md b/packages/notivue/nuxt/README.md
index 04fca675..a2efbe70 100644
--- a/packages/notivue/nuxt/README.md
+++ b/packages/notivue/nuxt/README.md
@@ -45,9 +45,6 @@ _Customize animations with CSS classes_
 **♿️ Fully accessible**  
 _Built-in announcements, reduced-motion and keyboard support_
 
-**📜 Complete yet friendly documentation**  
-_You're covered with a plain-language [documentation](https://notivuedocs.netlify.app/)_
-
 <br />
 
 ## Installation
@@ -79,6 +76,16 @@ export default defineNuxtConfig({
 })
 ```
 
+<blockquote>
+
+:bulb: After installing the module, any function, object and component mentioned in the [documentation](https://notivuedocs.netlify.app) can be auto-imported except for types which must be imported manually if needed.
+
+```ts
+import type { NotivueConfig, NotivueItem /*, ... */ } from 'notivue'
+```
+
+</blockquote>
+
 **app.vue**
 
 ```vue
diff --git a/packages/notivue/nuxt/module.d.ts b/packages/notivue/nuxt/module.d.ts
index 8ee53d3b..f9648f3d 100644
--- a/packages/notivue/nuxt/module.d.ts
+++ b/packages/notivue/nuxt/module.d.ts
@@ -3,6 +3,7 @@ import * as _nuxt_schema from '@nuxt/schema'
 import type { NotificationType, NotificationOptions, NotivueConfig } from 'notivue'
 
 type ModuleOptions = Omit<NotivueConfig, 'notifications'> & {
+   startOnCreation?: boolean
    /**
     * Whether to create and inject the notivue store in the Vue app.
     * Equivalent of calling `createNotivue(app)` in the main.js of a non-nuxt app.
diff --git a/packages/notivue/nuxt/module.json b/packages/notivue/nuxt/module.json
index 3711aa8f..ff5bc9e9 100644
--- a/packages/notivue/nuxt/module.json
+++ b/packages/notivue/nuxt/module.json
@@ -1,5 +1,5 @@
 {
    "name": "notivue/nuxt",
    "configKey": "notivue",
-   "version": "2.3.2"
+   "version": "2.4.0"
 }
diff --git a/packages/notivue/nuxt/module.mjs b/packages/notivue/nuxt/module.mjs
index 67dcd979..a9cf2435 100644
--- a/packages/notivue/nuxt/module.mjs
+++ b/packages/notivue/nuxt/module.mjs
@@ -1,6 +1,8 @@
 import { defineNuxtModule, addPluginTemplate, addImports, addComponent } from '@nuxt/kit'
 import { defu } from 'defu'
 
+import { getFunctions, getObjects, getComponents } from '../shared/exports'
+
 const module = defineNuxtModule({
    meta: {
       name: 'nuxt/notivue',
@@ -48,36 +50,11 @@ const module = defineNuxtModule({
          })
       }
 
-      for (const name of [
-         'push',
-
-         'usePush',
-         'useNotivue',
-         'useNotifications',
-         'useNotivueKeyboard',
-
-         'updateConfig',
-
-         'lightTheme',
-         'pastelTheme',
-         'materialTheme',
-         'darkTheme',
-         'slateTheme',
-
-         'outlinedIcons',
-         'filledIcons',
-      ]) {
+      for (const name of [...getFunctions(), ...getObjects({ omit: ['DEFAULT_CONFIG'] })]) {
          addImports({ name, as: name, from: 'notivue' })
       }
 
-      for (const name of [
-         'Notivue',
-         'NotivueKeyboard',
-         'Notifications',
-         'Notification',
-         'NotificationProgress',
-         'NotivueSwipe',
-      ]) {
+      for (const name of getComponents()) {
          await addComponent({ name, export: name, filePath: 'notivue' })
       }
    },
diff --git a/packages/notivue/package.json b/packages/notivue/package.json
index a46ba147..de954bdd 100644
--- a/packages/notivue/package.json
+++ b/packages/notivue/package.json
@@ -1,6 +1,6 @@
 {
    "name": "notivue",
-   "version": "2.3.2",
+   "version": "2.4.0",
    "private": false,
    "description": "Fully-featured toast notification system for Vue and Nuxt",
    "keywords": [
@@ -32,8 +32,8 @@
    "type": "module",
    "exports": {
       ".": {
-         "types": "./dist/index.d.ts",
-         "import": "./dist/index.js"
+         "import": "./dist/index.js",
+         "types": "./dist/index.d.ts"
       },
       "./nuxt": {
          "import": "./nuxt/module.mjs",
@@ -59,12 +59,13 @@
    "types": "dist/index.d.ts",
    "files": [
       "dist/*",
-      "nuxt/*"
+      "nuxt/*",
+      "shared/exports.js"
    ],
    "scripts": {
       "prebuild": "cp ../../README.md ../../LICENSE .",
       "build": "rm -rf dist && vue-tsc && vite build && pnpm build:css",
-      "postbuild": "rm -rf *.tgz && npm pack && ./scripts/verify-tarball.sh",
+      "postbuild": "rm -rf *.tgz && npm pack && ./scripts/verify-tarball.sh && node ./scripts/verify-exports.js",
       "build:css": "esbuild ./Notifications/notifications.css ./Notifications/notifications-progress.css ./core/animations.css --bundle --outdir=dist --minify --target=chrome58,edge16,firefox57,node12,safari11",
       "watch": "rm -rf dist && concurrently \"vite build --watch\" \"pnpm build:css --watch\""
    },
diff --git a/packages/notivue/scripts/verify-exports.js b/packages/notivue/scripts/verify-exports.js
new file mode 100644
index 00000000..f09f9863
--- /dev/null
+++ b/packages/notivue/scripts/verify-exports.js
@@ -0,0 +1,40 @@
+import { exports } from '../shared/exports.js'
+import * as index from '../dist/index.js'
+
+const objExports = Object.values(exports).flat()
+const jsExports = Object.keys(index)
+
+if (objExports.length !== jsExports.length) {
+   if (objExports.length < jsExports.length) {
+      const missing = jsExports.filter((name) => !objExports.includes(name))
+      throw new Error('Missing exports in shared/exports.js -> ' + missing.join(', '))
+   } else {
+      const missing = objExports.filter((name) => !jsExports.includes(name))
+      throw new Error('Missing exports in dist/index.js -> ' + missing.join(', '))
+   }
+} else {
+   let errors = ''
+
+   const jsMissing = []
+   const objMissing = []
+
+   objExports.forEach((name) => {
+      if (!jsExports.includes(name)) jsMissing.push(name)
+   })
+
+   jsExports.forEach((name) => {
+      if (!objExports.includes(name)) objMissing.push(name)
+   })
+
+   if (jsMissing.length > 0) {
+      errors += 'Inconsistent exports found in shared/exports.js -> ' + jsMissing.join(', ')
+   }
+
+   if (objMissing.length > 0) {
+      errors += '\n' + 'Inconsistent exports found in dist/index.js -> ' + objMissing.join(', ')
+   }
+
+   if (errors) throw new Error(errors)
+}
+
+console.log('All exports are valid.')
diff --git a/packages/notivue/scripts/verify-tarball.sh b/packages/notivue/scripts/verify-tarball.sh
index c643df00..86e03c26 100755
--- a/packages/notivue/scripts/verify-tarball.sh
+++ b/packages/notivue/scripts/verify-tarball.sh
@@ -16,6 +16,7 @@ declare -a files=(
     "dist/index.js" "dist/index.d.ts" "dist/astro.js"
     "dist/core/animations.css" "dist/Notifications/notifications.css" "dist/Notifications/notifications-progress.css"
     "nuxt/module.mjs" "nuxt/module.cjs" "nuxt/module.d.ts" "nuxt/module.json"
+    "shared/exports.js"
 )
 
 for file in "${files[@]}"; do
diff --git a/packages/notivue/shared/exports.js b/packages/notivue/shared/exports.js
new file mode 100644
index 00000000..62530e30
--- /dev/null
+++ b/packages/notivue/shared/exports.js
@@ -0,0 +1,44 @@
+export const exports = {
+   functions: [
+      'createNotivue',
+      'push',
+      'updateConfig',
+      'startInstance',
+      'stopInstance',
+
+      'usePush',
+      'useNotivue',
+      'useNotivueInstance',
+      'useNotifications',
+      'useNotivueKeyboard',
+   ],
+   objects: [
+      'DEFAULT_CONFIG',
+
+      'lightTheme',
+      'pastelTheme',
+      'materialTheme',
+      'darkTheme',
+      'slateTheme',
+
+      'filledIcons',
+      'outlinedIcons',
+   ],
+   components: [
+      'Notivue',
+      'NotivueSwipe',
+      'NotivueKeyboard',
+
+      'Notification',
+      'Notifications', // Alias
+      'NotificationProgress',
+      'NotificationsProgress', // Alias
+   ],
+   astro: ['NotivueAstro', 'pushAstro'],
+}
+
+const getExports = (type, omit) => exports[type].filter((name) => !omit.includes(name))
+
+export const getFunctions = ({ omit } = { omit: [] }) => getExports('functions', omit)
+export const getObjects = ({ omit } = { omit: [] }) => getExports('objects', omit)
+export const getComponents = ({ omit } = { omit: [] }) => getExports('components', omit)
diff --git a/packages/notivue/vite.config.ts b/packages/notivue/vite.config.ts
index 0032302f..c3018f3d 100644
--- a/packages/notivue/vite.config.ts
+++ b/packages/notivue/vite.config.ts
@@ -5,6 +5,9 @@ import { writeFileSync } from 'fs'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 
+// @ts-ignore
+import { getFunctions, getObjects, getComponents } from './shared/exports'
+
 const path = (url: string) => fileURLToPath(new URL(url, import.meta.url))
 
 const isFinalBundle = !process.argv.includes('--watch')
@@ -24,10 +27,12 @@ export default defineConfig({
    },
    esbuild: {
       drop: isFinalBundle ? ['console'] : [],
+      ...(!isFinalBundle ? { minifyIdentifiers: false, minifySyntax: false } : {}),
    },
    build: {
       emptyOutDir: isFinalBundle,
       target: 'es2015',
+      minify: isFinalBundle ? 'esbuild' : false,
       lib: {
          entry: 'index.ts',
          fileName: 'index',
@@ -50,6 +55,12 @@ export default defineConfig({
       {
          name: 'write-astro-entry',
          closeBundle() {
+            const astroReExports = [
+               ...getFunctions({ omit: ['push'] }),
+               ...getComponents({ omit: ['Notivue'] }),
+               ...getObjects(),
+            ]
+
             writeFileSync(
                'dist/astro.js',
                [
@@ -62,30 +73,3 @@ export default defineConfig({
       },
    ],
 })
-
-const astroReExports = [
-   'lightTheme',
-   'pastelTheme',
-   'materialTheme',
-   'darkTheme',
-   'slateTheme',
-
-   'filledIcons',
-   'outlinedIcons',
-
-   'createNotivue',
-   'updateConfig',
-
-   'DEFAULT_CONFIG',
-
-   'useNotivueKeyboard',
-   'useNotifications',
-   'useNotivue',
-   'usePush',
-
-   'Notifications',
-   'Notification',
-   'NotificationProgress',
-   'NotivueSwipe',
-   'NotivueKeyboard',
-]
diff --git a/tests/Notivue/components/Notivue.vue b/tests/Notivue/components/Notivue.vue
index fce81a4c..317808ac 100644
--- a/tests/Notivue/components/Notivue.vue
+++ b/tests/Notivue/components/Notivue.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { ref, shallowRef, toRefs, watchEffect, type Ref } from 'vue'
 
-import { push, useNotivue, Notivue, type PushOptions, type NotivueConfig, type Push } from 'notivue'
+import {
+   push,
+   useNotivue,
+   useNotivueInstance,
+   useNotifications,
+   Notivue,
+   type PushOptions,
+   type NotivueConfig,
+   type Push,
+} from 'notivue'
 
 import { RESOLVE_REJECT_DELAY } from '@/support/utils'
 
@@ -14,10 +23,19 @@ export type CyNotivueProps = {
 const cyProps = defineProps<CyNotivueProps>()
 
 const config = useNotivue()
+const { startInstance, stopInstance } = useNotivueInstance()
+const { entries, queue } = useNotifications()
 
 const { pauseOnTouch, pauseOnHover, teleportTo, limit, animations, enqueue, avoidDuplicates } =
    toRefs(cyProps)
 
+const autoClearCount = ref(0)
+const manualClearCount = ref(0)
+
+/* ====================================================================================
+ * Update config when props change
+ * ==================================================================================== */
+
 watchEffect(() => {
    if (animations?.value) config.animations.value = animations.value
    if (pauseOnTouch?.value) config.pauseOnTouch.value = pauseOnTouch.value
@@ -29,6 +47,10 @@ watchEffect(() => {
    if (avoidDuplicates?.value) config.avoidDuplicates.value = avoidDuplicates.value
 })
 
+/* ====================================================================================
+ * Callbacks used on click events
+ * ==================================================================================== */
+
 function pushAndClear() {
    const notification = push.success(cyProps.options ?? {})
    setTimeout(() => notification.clear(), RESOLVE_REJECT_DELAY)
@@ -38,9 +60,6 @@ function pushAriaLiveOnly() {
    push.success({ title: 'Title', message: 'Message', ariaLiveOnly: true })
 }
 
-const autoClearCount = ref(0)
-const manualClearCount = ref(0)
-
 const pushCallbacks = {
    onAutoClear: () => autoClearCount.value++,
    onManualClear: () => manualClearCount.value++,
@@ -106,23 +125,33 @@ async function pushPromiseAndReject() {
          <button class="DestroyButton" @click="item.destroy">Destroy</button>
       </Notivue>
 
+      <!-------------------------------- Push methods ---------------------------------->
+
       <button class="Success" @click="push.success(options ?? {})">Success</button>
       <button class="Error" @click="push.error(options ?? {})">Error</button>
       <button class="Warning" @click="push.warning(options ?? {})">Warning</button>
       <button class="Info" @click="push.info(options ?? {})">Info</button>
       <button class="Promise" @click="push.load(options ?? {})">Promise</button>
 
+      <!-------------------------------- Clear all Tests ---------------------------------->
+
       <button class="DestroyAll" @click="push.destroyAll">Destroy All</button>
       <button class="ClearAll" @click="push.clearAll">Clear All</button>
 
+      <!-------------------------------- Clear Tests ---------------------------------->
+
       <button class="PushAndClear" @click="pushAndClear">Push and Clear</button>
       <button class="PushAndDestroy" @click="pushAndDestroy">Push and Destroy</button>
 
+      <button class="PushAndRenderClear" @click="pushAndRenderClear">Push and Render Clear</button>
+      <button v-if="toBeCleared" class="RenderedClear" @click="toBeCleared.clear">Clear</button>
+
+      <!-------------------------------- Queue Tests ---------------------------------->
+
       <button class="PushAriaLiveOnly" @click="pushAriaLiveOnly">Push Aria Live Only</button>
       <button class="PushSkipQueue" @click="pushSkipQueue">Push and skip queue</button>
 
-      <button class="PushAndRenderClear" @click="pushAndRenderClear">Push and Render Clear</button>
-      <button v-if="toBeCleared" class="RenderedClear" @click="toBeCleared.clear">Clear</button>
+      <!-------------------------------- Promise Tests ---------------------------------->
 
       <button class="PushPromiseAndResolve" @click="pushPromiseAndResolve">
          Push Promise and Resolve
@@ -131,12 +160,23 @@ async function pushPromiseAndReject() {
          Push Promise and Reject
       </button>
 
+      <!-------------------------------- Callbacks Tests ---------------------------------->
+
       <button class="PushWithAutoClearCallback" @click="pushWithAutoClearCallback">
          {{ autoClearCount }}
       </button>
       <button class="PushWithManualClearCallback" @click="pushWithManualClearCallback">
          {{ manualClearCount }}
       </button>
+
+      <!-------------------------------- Instance Tests ---------------------------------->
+
+      <button class="StartInstance" @click="startInstance">Start Instance</button>
+      <button class="StopInstance" @click="stopInstance">Stop Instance</button>
+      <div class="QueueCount">{{ queue.length }}</div>
+      <div class="EntriesCount">{{ entries.length }}</div>
+
+      <div class="Config">{{ config }}</div>
    </div>
 </template>
 
diff --git a/tests/Notivue/instance.cy.ts b/tests/Notivue/instance.cy.ts
new file mode 100644
index 00000000..4d503a37
--- /dev/null
+++ b/tests/Notivue/instance.cy.ts
@@ -0,0 +1,93 @@
+import type { VueWrapper } from '@vue/test-utils'
+
+function testStoppedInstance() {
+   cy.getNotifications().should('have.length', 0, { timeout: 0 })
+   cy.get('.QueueCount').should('have.text', '0')
+   cy.get('.EntriesCount').should('have.text', '0')
+}
+
+it('Instance is stopped correctly', () => {
+   cy.mountNotivue()
+   cy.clickAllStatic()
+
+   cy.get('.StopInstance').click()
+   cy.clickAllStatic()
+
+   testStoppedInstance()
+})
+
+it('No new entries are added to the store if instance is stopped', () => {
+   cy.mountNotivue({
+      config: {
+         limit: 4,
+         enqueue: true,
+      },
+   })
+
+   for (let i = 0; i < 10; i++) {
+      cy.clickAllStatic()
+   }
+
+   cy.get('.StopInstance').click()
+   testStoppedInstance()
+})
+
+it('Plugin can be installed without starting the instance', () => {
+   cy.mountNotivue({
+      config: {
+         startOnCreation: false,
+      },
+   })
+
+   cy.clickAllStatic()
+   testStoppedInstance()
+})
+
+it('Instance can be stopped and started again', () => {
+   cy.mountNotivue()
+
+   for (let i = 0; i < 10; i++) {
+      cy.get('.StopInstance').click()
+      cy.clickAllStatic()
+      testStoppedInstance()
+
+      cy.get('.StartInstance')
+         .click()
+         .clickAllStatic()
+         .getNotifications()
+         .should('have.length', 4, { timeout: 0 })
+         .get('.EntriesCount')
+         .should('have.text', '4', { timeout: 0 })
+   }
+})
+
+it('Config is not updated if instance is stopped', () => {
+   cy.mountNotivue()
+
+   const differentConfig = {
+      pauseOnHover: false,
+      pauseOnTouch: false,
+      pauseOnTabChange: false,
+      enqueue: true,
+      position: 'bottom-center',
+      teleportTo: 'html',
+      limit: 3,
+      avoidDuplicates: true,
+   }
+
+   cy.get('.Config')
+      .invoke('text')
+      .then((initialConfig) => {
+         cy.get('.StopInstance').click()
+
+         cy.get<VueWrapper>('@vue').then((wrapper) => {
+            wrapper.setProps(differentConfig)
+
+            cy.get('.Config')
+               .invoke('text')
+               .should((updatedConfig) => {
+                  expect(updatedConfig).to.eq(initialConfig)
+               })
+         })
+      })
+})
diff --git a/tests/Notivue/slot-internal-properties.cy.ts b/tests/Notivue/slot-internal-properties.cy.ts
index f5c13c8b..6db8611f 100644
--- a/tests/Notivue/slot-internal-properties.cy.ts
+++ b/tests/Notivue/slot-internal-properties.cy.ts
@@ -1,12 +1,12 @@
 import { parseText } from '@/support/utils'
-import { hiddenInternalKeys } from '@/Notivue/utils'
+import { internalKeys } from '@/core/utils'
 
 it('Hidden internal properties are never defined', () => {
    cy.mountNotivue()
 
       .clickRandomStatic()
       .getNotifications()
-      .then((el) => expect(parseText(el)).to.not.have.keys(hiddenInternalKeys))
+      .then((el) => expect(parseText(el)).to.not.have.keys(internalKeys))
 })
 
 it('Exposed internal properties are always defined', () => {
diff --git a/tests/config/update-config.test.ts b/tests/config/update-config.test.ts
index 198e63fb..4a903c3e 100644
--- a/tests/config/update-config.test.ts
+++ b/tests/config/update-config.test.ts
@@ -6,11 +6,15 @@ import {
    DEFAULT_NOTIFICATION_OPTIONS as defaultNot,
 } from '@/core/constants'
 
-import type { UseNotivueReturn, NotivueConfig, NotivueConfigRequired } from 'notivue'
+import { ref } from 'vue'
+
+import type { NotivueConfig, NotivueConfigRequired, ConfigSlice } from 'notivue'
 
 type ConfigPairs<K extends keyof NotivueConfig> = [K, NotivueConfig[K]]
 
 describe('Update method', () => {
+   const isRunning = ref(true)
+
    test('Should update primitive properties', () => {
       const newConf: ConfigPairs<keyof NotivueConfig>[] = [
          ['pauseOnTouch', false],
@@ -22,7 +26,7 @@ describe('Update method', () => {
          ['limit', Math.random() * 100],
       ]
 
-      const config = createConfig({}) as UseNotivueReturn
+      const config = createConfig({}, isRunning) as ConfigSlice
 
       for (const [key, value] of newConf) {
          expect(config[key].value).not.toBe(value)
@@ -37,7 +41,7 @@ describe('Update method', () => {
       test('Animations', () => {
          const animations = { enter: 'Vitest_Enter', leave: 'Vitest_Leave' }
 
-         const config = createConfig({})
+         const config = createConfig({}, isRunning) as ConfigSlice
 
          config.update({ animations })
 
@@ -59,7 +63,7 @@ describe('Update method', () => {
             'promise-reject': { duration: Math.random() * 100 },
          }
 
-         const config = createConfig({}) as UseNotivueReturn
+         const config = createConfig({}, isRunning) as ConfigSlice
 
          config.update({ notifications: newConf })
 
@@ -89,7 +93,7 @@ describe('Update method', () => {
          },
       }
 
-      const c = createConfig(userConf) as UseNotivueReturn
+      const c = createConfig(userConf, isRunning) as ConfigSlice
 
       let prevConf = {} as NotivueConfigRequired
 
diff --git a/tests/cypress/support/commands-notivue.ts b/tests/cypress/support/commands-notivue.ts
index f2ba0230..7f00d590 100644
--- a/tests/cypress/support/commands-notivue.ts
+++ b/tests/cypress/support/commands-notivue.ts
@@ -7,7 +7,12 @@ import Notivue, { type CyNotivueProps } from '@/tests/Notivue/components/Notivue
 
 import { createNotivue, type NotivueConfig } from 'notivue'
 
-type MountNotificationsOptions = { config?: NotivueConfig; props?: CyNotivueProps }
+type MountNotificationsOptions = {
+   config?: NotivueConfig & {
+      startOnCreation?: boolean
+   }
+   props?: CyNotivueProps
+}
 
 declare global {
    namespace Cypress {
diff --git a/tests/package.json b/tests/package.json
index ed9bcbb6..7445a3b5 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -10,17 +10,17 @@
       "notivue": "workspace:*"
    },
    "devDependencies": {
-      "@types/node": "^20.12.5",
+      "@types/node": "^20.12.7",
       "@vitejs/plugin-vue": "^5.0.4",
       "@vue/test-utils": "^2.4.5",
       "axe-core": "^4.9.0",
-      "cypress": "^13.7.2",
+      "cypress": "^13.7.3",
       "cypress-axe": "^1.5.0",
       "cypress-real-events": "^1.12.0",
-      "typescript": "^5.4.4",
+      "typescript": "^5.4.5",
       "vite": "^5.2.8",
-      "vitest": "^1.4.0",
+      "vitest": "^1.5.0",
       "vue": "^3.4.21",
-      "vue-tsc": "^2.0.10"
+      "vue-tsc": "^2.0.13"
    }
 }
diff --git a/tests/tsconfig.json b/tests/tsconfig.json
index 006684e2..d6c2911d 100644
--- a/tests/tsconfig.json
+++ b/tests/tsconfig.json
@@ -8,6 +8,7 @@
       "isolatedModules": true,
       "esModuleInterop": true,
       "lib": ["ESNext", "DOM"],
+      "checkJs": true,
       "skipLibCheck": true,
       "noEmit": true,
       "baseUrl": ".",