Hi can I make a notification globaly?

Questions
#1

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,
  })
notificationFull.open();
    },
#2

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

#3

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

1 Like
#4

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 ?

#5

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.

#6

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:

window.f7.notification.create(...);
#7

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 ?