A plugin must either be a function or an object with an "install" function

[deniciocode]

Describe the bug I am not able to install the plugin. I receive a warning on the vue console in my browser. [Vue warn]: A plugin must either be a function or an object with an "install" function.

To Reproduce

This is my main.js

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import { ActionCableVue } from 'actioncable-vue';

import App from './App.vue';
import GameComponent from './components/GameComponent.vue';
import HomeComponent from './components/HomeComponent.vue';

const app = createApp(App)
const routes = [
  { path: '/home', component: HomeComponent },
  { path: '/game', component: GameComponent }
]

const router = createRouter({
  mode: 'history',
  history: createWebHistory(),
  routes: routes
})

app.use(router)

app.use(ActionCableVue, {
  debug: true,
  debugLevel: 'error',
  connectionUrl: 'ws://localhost:3000/api/cable',
  connectImmediately: true,
})

app.mount('#app')

Expected behaviour I would expect that $cable is ready to use in my components.

Screenshots

This is a screenshot from the browser console

These are my used packages which includes the vue version

Plugin version: 2.3.2

Additional context I am new to vue and I am using the newest version of vue 3.0.0. The project is started fresh.

[mclintprojects]

@DenniJensen This plugin currently only supports Vue 2.0. I'll look into adding Vue 3.0 support as soon as I can.

[mclintprojects]

@DenniJensen I think I just realized the issue here. You're doing import { ActionCableVue } from 'actioncable-vue' instead ofimport ActionCableVue from 'actioncable-vue'`. Let me know if that fixes it.

[docming]

hei,guy,do you resovle it?when I use vue3 and import a ui ,it occurs

[mclintprojects]

@docming @DenniJensen @timmaier Vue 3 support just went live thanks to #37. Kindly update to actioncable-vue 2.4.0.

[MohsenDastaran]

I also have the same issue using Vue3

[IgorFZ]

I also have the same issue using Vue3

Me too, did you manage to solve this?

[Jegatheesh-Metaphor]

Hello, Did any one got the update for the "A plugin must either be a function or an object with an "install" function" in Vue3 ? if yes, please advise how to fix this?

[mdnurulmomen]

Even though its been a while, but its for future developers

If your environment is vite with vue 3, and the warning is indicating to AOS plugin, then just remove the following line from your js file.

app.use(AOS)

Thats it !

I'm gonna put a sample code for vue 3.

import { createApp } from 'vue'

// importing plugins
import { createMemoryHistory, createRouter } from 'vue-router'

import AOS from 'aos'
import 'aos/dist/aos.css'

import Index from './pages/website/Index.vue'

const router = createRouter({
    history: createMemoryHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Index
        }
    ],
});

router.beforeEach((to, from, next) => {
    AOS.init(); // Initialize AOS
    next();
});

app
.use(router)
.mount('#app');

Hope this will help someone.