BaseNotification

Props

Prop name	Description	Type	Values	Default
duration	time the notification is shown	number	-	4000
hasHeader	define if a header is present to display notification below that header if a header is present make sure the css variable --header-height is set correctly!	boolean	-	true

---

BaseNotification is a plugin based on vue3-notification. Use it by adding the plugin on app initialization:

import { createApp } from "vue";
import App from "@/App.vue";
import { BaseNotificationsPlugin } from "base-ui-components";

const app = createApp(App);
app.use(BaseNotificationsPlugin);
app.mount("#app");

And add the component to your app

<template>
  <div>
    <BaseNotification :has-header="false" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Demo

The plugin can then be triggered with $notify(options) in Options API.

In Composition API it can be triggered with notify(options) from the useNotifications composable.

<script setup>
import { useNotifications } from "base-ui-components";

const { notify } = useNotifications();

function triggerNotification() {
  notify({
    group: "request-notifications",
    title: "Something went wrong!!",
    text: "This is how your error notification will look like.",
    type: "error",
    duration: 1000,
  });
}
</script>

Using in Nuxt setup

Add the BaseNotificationsPlugin to make the BaseNotification component globally available in your Nuxt frontend.

import { BaseNotificationsPlugin } from "base-ui-components";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BaseNotificationsPlugin);
  // in case you want to expose the $notify method add:
  const notify = nuxtApp.vueApp.config.globalProperties.$notify;
  return {
    provide: {
      notify,
    },
  };
});