rootComponent in v7?

Build many apps with Framework7 v5, and currently building the first one with v7. One thing I can’t figure out, is how to have ‘global’ app helper methods. For example a logout method. In v5 I had methods like logout or helper methods for custom dialogs in app methods parameter or in root component methods:

return {
  methods: {
    logout: function() {

And I could call it from other components like this: this.$app.rootComponent.logout()

What is a best-practise for where to place global methods in v7? App initialization parameters don’t seem to exist anymore and I can’t figure out how to access methods in root component (single file component).

using store:

let app = new Framework7({
//store: Framework7.createStore({
  store: { // not reactive
    state: {
      logger: (v) => console.log(v),
      dialog: (v) => app.dialog.alert(v)

using plugin:

  create() {
      methods: {
        logger: (v) => console.log(v),
        dialog: (v) => this.dialog.alert(v)

let app = new Framework7({ /* params */ });

1 Like

Great examples, thanks! Was indeed experimenting with using the store dispatch methods, but it felt like these were more meant for data-related items using the store contents. Seems to be good enough for now then :slight_smile:

1 Like

store (getters-state) is reactive.
if you dont need reactive-state then use the plugin


Still busy getting used to the new workflow, by using store dispatch methods and ‘responsive’ template literals. (F7 core)

My store.js starts to look like this. Although everything works like a charm, I’m wondering if this is the right way because I have to create setters for every state property I want to use somewhere.

Schermafbeelding 2022-06-14 om 12.36.01

And then in my app component I am for example using the getters.profile.value to check if a profile is selected:

not really
it depends in your state structure