VueJS Adding to lifecycle hooks on every component

Question

So I have a loader screen in my app, and the idea is to show the loader screen on the beforeCreate hook so the user can't see the stuff being rendered, and then on the mounted hook remove the loader screen.

This is fun and nice for when you have two or three view/components, but currently my app has a lot more than that, and adding it to each component/view doesn't make much sense for me.

So I was wondering, is there any way to add something to the beforeCreate and mounted hooks on a global scope. Something like this:

main.js

Vue.beforeCreate(() => {
    //Show the loader screen
});

Vue.mounted(() => {
    //Hide the loader screen
});

That way it would be applied to every component and view

tony19 · Accepted Answer · 2022-07-15 02:46:28Z

9

You can use mixins for this purposes, and import in components.

//mixins.js
export default {
  beforeCreate() {},
  mounted() {}
}

And in component add mixins: [importedMixins]

You will have access to 'this'.

Actualy you can use and vuex to (mapGetters, mapActions etc.)

If you don't want include mixins in every component, try to use vue plugins system (https://v2.vuejs.org/v2/guide/plugins.html):

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

And use your plugin like this Vue.use(MyPlugin, { someOption: true })

edited Jul 15, 2022 at 2:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 10, 2018 at 11:51

Vladislav Gritsenko

8235 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Silva Over a year ago

That's a step in the right direction, but ideally I would want to avoid adding the same thing to every single component and view..

Vladislav Gritsenko Over a year ago

@AdamSilva so, maybe plugins? And add mixins like this: Vue.mixin({ created: function () { // some logic ... } ... }) vuejs.org/v2/guide/plugins.html

Adam Silva Over a year ago

Yeah, this is a nice workaround. I was hoping there would be a more direct approach to this.

Adam Orłowski · Accepted Answer · 2018-08-10 12:53:40Z

1

There is something very silimar to your request in vue-router. I've never used afterEach but beforeEach works perfectly.

router.beforeEach((to, from, next) => {
  /* must call `next` */
})

router.beforeResolve((to, from, next) => {
  /* must call `next` */
})

router.afterEach((to, from) => {})

Here is a documentation

There is also a hook called 'beforeRouteEnter'.

Link to beforeRouteEnter docs

edited Aug 10, 2018 at 12:53

answered Aug 10, 2018 at 12:41

Adam Orłowski

4,53226 silver badges35 bronze badges

Collectives™ on Stack Overflow

VueJS Adding to lifecycle hooks on every component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related