yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Any documentation on how to install it on laravel ?

eXCom opened this issue · comments

commented

what trouble you have? the documentation should be the same

commented

This is what i got

app.js:13860 [Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. at <SidebarMenu menu= Array(3) > at <Authenticated tree= Object > at <TeamMainPage successMessage=null errors= Object auth= Object ... > at <Inertia initialPage= Object resolveComponent=fn<resolveComponent> > at <App> warn @ app.js:13860 app.js:13860 [Vue warn]: Property "_self" was accessed during render but is not defined on instance. at <SidebarMenu menu= Array(3) > at <Authenticated tree= Object > at <TeamMainPage successMessage=null errors= Object auth= Object ... > at <Inertia initialPage= Object resolveComponent=fn<resolveComponent> > at <App> warn @ app.js:13860 app.js:13860 [Vue warn]: Unhandled error during execution of render function at <SidebarMenu menu= Array(3) > at <Authenticated tree= Object > at <TeamMainPage successMessage=null errors= Object auth= Object ... > at <Inertia initialPage= Object resolveComponent=fn<resolveComponent> > at <App> warn @ app.js:13860 app.js:13860 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next at <SidebarMenu menu= Array(3) > at <Authenticated tree= Object > at <TeamMainPage successMessage=null errors= Object auth= Object ... > at <Inertia initialPage= Object resolveComponent=fn<resolveComponent> > at <App> warn @ app.js:13860 app.js:51246 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.<anonymous> (app.js:51246) at renderComponentRoot (app.js:7785) at ReactiveEffect.componentUpdateFn [as fn] (app.js:11532) at ReactiveEffect.run (app.js:5868) at setupRenderEffect (app.js:11658) at mountComponent (app.js:11441) at processComponent (app.js:11399) at patch (app.js:11003) at mountChildren (app.js:11190) at processFragment (app.js:11358)

commented

1

commented

actually i just tried installing it on a fresh laravel application and its working, so i think my problem is because im using inertia, sorry

make sure you did install the correct version
for vue3 npm i vue-sidebar-menu@next --save

commented

This is what i get when i enter

npm list vue

123
does that mean i have both vue2 and vue3 ?

commented

Do you have any ideas maybe i did something wrong here?

before installation:

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

after installation

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import VueSidebarMenu from "vue-sidebar-menu";
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .use(VueSidebarMenu)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

you have v4 installed which doesn't support vue3 you need to install v5.x

commented

I dont understand why i didnt install v5. It worked, thanks a lot!