Cannot read property '$nuxt' of undefined

Question

I am working on nuxt.js project and getting an error Cannot read property '$nuxt' of undefined when trying to access an event from plugin.

In ~/plugins/myPlugin.js

import Vue from 'vue';

this.$nuxt.$on('emit-height', (payload) => {
  Vue.prototype.$bannerHeight = payload;
});

Importing in ~/plugins/nuxt.config.js

plugins: [
  '~/plugins/get-main-banner-height.js',
]

this.$nuxt.$on works if I use it in any components but doesn't work in plugin as mentioned above.

In my component I am emitting the height.

methods: {
  getMainBannerHeight() {
    this.$nextTick(() => {
      this.$nuxt.$emit('emit-main-banner-height', this.bannerHeight);
    });
  },
}

So, my question is "How to listen/capture event in plugins"?

Aldarund · Accepted Answer · 2018-12-24 00:12:03Z

1

You can reference app in context of nuxt plugin. Docs https://nuxtjs.org/api/context/

import Vue from 'vue';

export default ({ app }) => {
  app.$on('emit-height', (payload) => {
    Vue.prototype.$bannerHeight = payload;
  });
}

answered Dec 24, 2018 at 0:12

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

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

1 Comment

Does this still work? Can't seem to get it to work now.