I have a project in Vue3 and want to implement a real time API or a web socket. So I attempted to use pusher using Vue third part libraries which are pusher-vue and vue-pusher . Using pusher-vue I am getting the error: Uncaught TypeError: e.prototype is undefined . Using vue-pusher I am getting the error: Uncaught TypeError: Vue.prototype is undefined . The following are the libraries' configurations:
PUSHER VUE
Component.vue
export default{ channels: { applications_channel: { subscribeOnMount: true, subscribed(){ console.log("Some text") }, bind:{ add_application_event(data){ console.log(data) } } } } }
main.js
createApp(App).use(PusherVue, { app_key: "MY_KEY", cluster: 'MY_CLUSTER', debug: true, debugLevel: "all" }).mount("#app")
VUE PUSHER
Component.vue
export default{ read(){ var channel = this.$pusher.subscribe('applications-channel') channel.bind('add-application-event', ({ log }) => { console.log(log); }) } }
main.js
createApp(App).use(require("vue-pusher"), { api_key: "MY_KEY", options: { cluster: 'MY_CLUSTER', ecrypted: true, } }).mount("#app")
May you please help with how can I configure this on Vue3 or recommend any beginner friendly alternatives to achieve the same functionality on Vue3.
Both pusher-vue
and vue-pusher
were built for Vue 2, so you need to use the Vue 3 migration build to make the library work in your project.
To setup your Vue CLI scaffolded project:
Install the Vue compatibility build and SFC compiler that matches your Vue build version (ie, install @vue/compat@^3.1.0
and @vue/compiler-sfc@^3.1.0
if you have vue@^3.1.0
in package.json
):
npm i -S @vue/compat@^3.1.0 npm i -S @vue/compiler-sfc@^3.1.0
Configure Webpack to alias vue
to the @vue/compat
build, and set vue-loader
's compatibility mode to Vue 2:
// vue.config.js module.exports = { chainWebpack: config => { config.resolve.alias.set('vue', '@vue/compat') config.module.rule('vue').use('vue-loader').tap(options => { return {...options, compilerOptions: { compatConfig: { MODE: 2 } } } }) } }
demo: vue-pusher
in Vue 3 w/migration build
However, vue-pusher
1.1.0 seems to only expose a new instance of Pusher (from pusher-js
) as this.$pusher
on the Vue instance. That code could easily be migrated to Vue 3 as a plugin:
// plugins/pusher.js
export default (app, { apiKey, ...options }) => {
const Pusher = require('pusher-js')
app.config.globalProperties.$pusher = new Pusher(apiKey, options)
}
// main.js
const { createApp } = require('vue')
import App from './App.vue'
import PusherPlugin from './plugins/pusher'
createApp(App)
.use(PusherPlugin, { apiKey: 'YOUR_API_KEY', cluster: 'YOUR_CLUSTER' })
.mount('#app')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.