F7.notification.create Not working

Questions
1

I’m trying to create a notification in Vue.

<template>
	<f7-page name="home">
		<f7-block>
			<f7-button fill @click="Notify">Notification</f7-button>
		</f7-block>
	</f7-page>
</template>
<script setup>
import { f7, f7Page, f7Block, f7Button } from "framework7-vue";

const Notify = () => {
	f7.notification.create({
		title: "Framework7",
		subtitle: "Notification with close button",
		text: "Click (x) button to close me",
		closeButton: true,
	});
};
</script>

console.log(f7) showing all the methods but still, I don’t see the notification. What am I doing wrong?

2

you need to open it.

$f7.notification.create({/* params */}).open();
2 Likes
3

I can see it looks like you are using Vue 3 which requires a different syntax than Vue 2. There is no global $f7 variable in Vue 3. Follow the code I have here for main.js you need to tell Vue to use the Framework7 plugin.

Check that your main.js has the imported libraries.

import { createApp } from 'vue'
import Framework7 from 'framework7/lite-bundle';
import Framework7Vue from 'framework7-vue/bundle';
import App from './App.vue'
import '../node_modules/framework7/framework7-bundle.min.css';

Framework7.use(Framework7Vue)
const app = createApp(App)
app.mount('#app')

In your component then import f7 and create a notification.

import { f7 } from 'framework7-vue';

const showNotification = ()=> {
	f7.notification.create({
		title: 'title',
		subtitle: "subtitle",
		text: 'text',
		closeOnClick: true,
		closeTimeout:4000
	}).open();
}