Add support for Vue 3 (errors due to Global API changes)

[akserikawa]

Trying to install the plugin on a Vue 3 project (w/ Nuxt 3) it errors:

500
Cannot set properties of undefined (setting 'pusher')

at Object.install (http://localhost:3000/_nuxt/node_modules/.vite/deps/vue-pusher.js?v=ae3370f2:6061:30)
at Object.use (http://localhost:3000/_nuxt/node_modules/.vite/deps/vue.js?v=ae3370f2:4690:18)
at http://localhost:3000/_nuxt/plugins/pusher.client.js:4:18
at fn (http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs?v=ae3370f2:141:27)
at callWithNuxt (http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs?v=ae3370f2:146:12)
at applyPlugin (http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs?v=ae3370f2:92:29)
at applyPlugins (http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs?v=ae3370f2:101:11)
at async initApp (http://localhost:3000/_nuxt/home/akiraserikawa/Sites/nuxt-demo/node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/entry.mjs:39:7)

this caused by changes in Vue 3, where Vue.prototype does not exist anymore, so the plugin cannot work:

module.exports = {
    install: function (Vue, options) {
        var pusher = new VuePusher(options.api_key, options.options);

        Vue.prototype.pusher  = pusher;
        Vue.prototype.$pusher = pusher.pusher; // Just in case they want to manage it themselves.
    }
};

I guess it would require the plugin to use app.config.globalProperties instead.

https://vuejs.org/api/application.html#app-config-globalproperties

[akserikawa]

Managed to make it work with this workaround:

// plugins/pusher.js

import Pusher from "pusher-js";

export default defineNuxtPlugin((nuxtApp) => {
  const Vue3Pusher = {
    install: (app, options) => {
      var pusher = new Pusher(options.api_key, options.options);

      app.config.globalProperties.$pusher = pusher;
    },
  };

  nuxtApp.vueApp.use(Vue3Pusher, {
    api_key: "****",
    options: {
      cluster: "eu",
    },
  });
});

[Philword]

Managed to make it work with this workaround:

// plugins/pusher.js

import Pusher from "pusher-js";

export default defineNuxtPlugin((nuxtApp) => {
  const Vue3Pusher = {
    install: (app, options) => {
      var pusher = new Pusher(options.api_key, options.options);

      app.config.globalProperties.$pusher = pusher;
    },
  };

  nuxtApp.vueApp.use(Vue3Pusher, {
    api_key: "****",
    options: {
      cluster: "eu",
    },
  });
});

How did you use it inside component?