Hi can I make a notification globaly?

I have a notification created as below, I want to get it run regardles of the component open, how can I do that ?

Currently code is in a component however I want to get it triggered from a state from any component

    about() {
var notificationFull = this.$f7.notification.create ({
    title: 'My App',
    closeTimeout: 3000,

Is there something wrong with my question? I am still stuck on this

you use f7-vue just dispatch an action, in that action show your modal/component. put your component in app.vue,

1 Like

Hi pvtallulah, can you describe more ? How can I define a component in App.vue ? Should I import it ?

btw, that code is not an independent component, its just in a component and I want to trigger it by a state change, not from a method, based on that info, can you help ?

Thanks pvtallulah, I have done it but it is not working in App.vue, instead I defined in indivual components.

I caouldnt understand dispatching part, I just defined a component where I call notification from created, and imported that component and put in app vue.

To run it globally from somewhere you need global access to f7 initialized instance, in Vue it can be done when you init Vue root component:

new Vue({
  framework7: {
  methods: {
    onF7Ready(f7) {
      // register f7 instance globally:
      window.f7 = f7;

Then you can do it from any place by calling:


Thanks Vladimir , I will try but actually notification part is already in one place, its in an component and used in every component.

Issue is I had to bind that component to to html (as imported component) in every other components ,in order to get that notification component run when in a component

However what I wanted to do is, trigger and show notificaiton from one place only, but somehows App.vue has problems with that.

Whats the difference between App.vue and other component vue ? Isnt it always run in background ? I mean if I have a computed value, or I bind an imported component in App.vue, ist it run regardless of you are in page ? I mean when you route ot her path, which is a component, arent you also in App.vue as always ?