A Nuxt 3 module for integrating Firebase Cloud messaging. This module is based on Firebase JS SDK on the client side and Firebase Admin SDK on the server side.
- ✔️ Listen to messages via
useFcm
composable - ✔️ Send, subscribe & unsubscribe from topics via
useFcmTopic
composable
- Add dependencies to your project
# Using npm
npm install --save-dev @bg-dev/nuxt-fcm
# Using yarn
yarn add --dev @bg-dev/nuxt-fcm
- Add
@bg-dev/nuxt-fcm
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["@bg-dev/nuxt-fcm"],
});
- Set
fcm
config object
-
firebaseConfig
Firebase project configuration. -
vapidKey
Public server key provided to push services docs. -
serviceAccount
Firebase admin credentials docs. You can ignore this property in case the app server is not needed.
- If you are using an app server, make sure to enable
Cloud messaging API
docs.
That's it! You can now use Nuxt FCM in your Nuxt app ✨
By default all the topic's related features are inaccessible. Add a server-side middleware to check the user's role and set the permissions accordingly.
// server/middleware/fcm.ts
import { setPermissions } from "#fcm";
export default defineEventHandler((event) => {
setPermissions(event, {
topic: {
send: true,
subscribe: true,
unsubscribe: true,
},
});
});
In the foreground, when a message is received it's passed to the page and the onMessage
event is dispatched with the payload.
const { onMessage } = useFcm();
onMessage(console.log);
In the background, notifications are automatically shown when a message is received. To add custom logic, the service worker can be extended via the serviceWorkerScript
config option (source).
// nuxt.config.ts
fcm: {
serviceWorkerScript: `
messaging.onBackgroundMessage((payload) => {
console.log("Received background message ", payload);
})
`,
},
You can integrate other Firebase services such as Google Analytics to provide insights into user behavior and engagement stats.
// nuxt.config.ts
// Exclude package from vite optimization
vite: {
optimizeDeps: {
exclude: ["firebase/analytics"],
},
},
// plugins/analytics.client.ts
// Define a client-side plugin to expose the service's instance
import { getAnalytics } from "firebase/analytics";
export default defineNuxtPlugin(() => {
const analytics = getAnalytics();
return {
provide: {
analytics,
},
};
});
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release