Add In-App Notifications to Your Vue.js SaaS
One script tag in your index.html. No Vue SDK or npm package needed. Works with Vue 2, Vue 3, and Nuxt.js. Real-time delivery via SSE.
Why No SDK?
No Vue package needed. Seriously.
Notilayer loads as an external script and renders inside a Shadow DOM. It does not touch your Vue component tree, your build pipeline, or your node_modules.
No npm install
Zero dependencies added to your package.json. No version conflicts, no lock file changes, no security audit entries.
No build step changes
No Vite plugins, no Webpack config updates. The script loads externally and stays out of your build pipeline entirely.
Works with Vue 2 + 3
Not coupled to any Vue version. Options API, Composition API, or <script setup> — it all works.
Shadow DOM isolation
Widget renders in its own Shadow DOM. Your scoped styles, Tailwind classes, and global CSS will never conflict with it.
Step 1
Add the script tag to index.html
Add the Notilayer widget script to your index.html file. For Vite-based projects, this is in the project root. For Vue CLI projects, it is in the public/ folder. The script loads asynchronously with defer so it will not block rendering.
Open your index.html
Located at the project root (Vite) or public/ (Vue CLI).
Paste the script tag
Add it before the closing </body> tag. Pass your App ID via data-app-id.
Bell appears on load
The widget renders a bell icon with an inbox. No Vue component needed.
index.html
<!-- public/index.html (Vue CLI) or index.html (Vite) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
<script
src="https://api.notilayer.com/widget/widget.js"
data-app-id="YOUR_APP_ID"
defer
></script>
</body>
</html>App.vue
// App.vue (Vue 3 Composition API)
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
// Widget auto-initializes after script loads
// Use onMounted to identify the current user
if (window.Notilayer) {
window.Notilayer.init({
projectId: 'YOUR_APP_ID',
userId: currentUser.id,
})
}
})
</script>
<template>
<div id="app">
<router-view />
</div>
</template>Step 2
Initialize in your Vue component
Use the onMounted lifecycle hook to call window.Notilayer.init() with your project ID and the current user's ID. This connects the widget to the right user and opens the real-time SSE connection.
- Works with Vue 3 Composition API and
<script setup> - For Vue 2, use the
mounted()lifecycle hook instead - SSE connection opens automatically after initialization
Step 3
Send notifications from your backend
Use the Notilayer REST API to send notifications from any backend — Node.js, Python, Go, or any language that supports HTTP. Notifications are delivered to the user's widget in real-time via SSE. No WebSocket setup required.
Simple REST API
One POST request sends a notification. No message queues, no pub/sub infrastructure to manage.
Real-time via SSE
Notifications appear instantly in the user's widget. Server-Sent Events are simpler and more reliable than WebSockets.
User segmentation
Target specific users by ID, or send to segments. Built into the API with no extra configuration.
server.js
// Send a notification from your Node.js backend
const response = await fetch(
'https://api.notilayer.com/v1/notifications',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY',
},
body: JSON.stringify({
userId: 'user_123',
title: 'New message',
body: 'You have a new message from your team.',
}),
}
);
What You Get
Everything your Vue.js app needs for notifications
A complete notification widget that works out of the box. No custom UI to build, no state management to wire up.
Bell icon
A customizable bell icon that appears in your app. Click to open the notification inbox. Positioned automatically.
Notification inbox
A full inbox UI with notification list, timestamps, and read/unread states. No custom components to build.
Unread badge
A red badge on the bell icon showing the unread count. Updates in real-time as new notifications arrive.
Real-time delivery
Notifications appear instantly via Server-Sent Events. No WebSocket setup, no polling, no complex infrastructure.
User segmentation
Send notifications to specific users or segments. Target by user ID, role, plan, or custom attributes.
Shadow DOM isolation
Widget styles are fully encapsulated. No CSS conflicts with your Vue components, scoped styles, or Tailwind.
Compatibility
Works with the entire Vue.js ecosystem
The widget is framework-agnostic by design. One script tag works across every Vue.js setup.
Vue 2
Options API
Vue 3
Composition API
Nuxt.js
Nuxt 2 + Nuxt 3
Vite
Default build tool
Vue CLI
Webpack-based
FAQ
Vue.js integration questions
Do I need a Vue SDK or npm package for Notilayer?
Does Notilayer work with Vue 2 and Vue 3?
Will the notification widget conflict with my Vue component styles?
Can I use Notilayer with Nuxt.js?
Explore more: Home · React Notification Bell · Next.js Notifications · Node.js Backend
Add Notifications to Your Vue.js App
One script tag. No npm package. Works with Vue 2, Vue 3, and Nuxt.js. Free plan included.