Error when i collapse the menu
alesssz opened this issue · comments
I'm getting an error when i try to collapse the menu.
I got this in my main.js
import { createApp } from 'vue'
import App from './App.vue'
/* Bootstrap */
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
/* Font Awesome */
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'
/* Sidebar menu */
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
app.use(VueSidebarMenu)
app.mount('#app')
in App.vue
<template>
<main>
<SideBarMenu></SideBarMenu>
</main>
</template>
<script>
import SideBarMenu from './components/includes/SideBarMenu.vue'
export default {
name: 'App',
components: {
SideBarMenu
}
}
</script>
And in the SideBarMenu.vue
component
<template>
<sidebar-menu :menu="menu" />
</template>
<script>
export default {
data() {
return {
menu: [
{
header: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Charts',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Sub Link'
}
]
}
]
}
}
}
</script>
Im getting this error
Uncaught (in promise) DOMException: Node.insertBefore: Child to insert before is not a child of this node
when I try to collapse the menu with the button in the footer.
How to resolve this?
I am not able to reproduce the issue, can you provide a minimal reproduction?
I am not able to reproduce the issue, can you provide a minimal reproduction?
Digging out what's wrong, I found out that the interations with @fortawesome/fontawesome-free
is causing that error, but I honestly don't know why.
Using the regular font awesome (from Font Awesome Vue with their imports is working well (but I didn't want to set up a library.add
for each icons, that's why I tried to use @fortawesome/fontawesome-free
)
This is the reproducable thing, i tried to build a brand new project with Vue CLI and copy and paste all the code above (installing modules like @fortawesome/fontawesome-free
, bootstrap
, vue-router
and obviously vue-sidebar-menu
) and the interaction with @fortawesome/fontawesome-free
is causing the error. Removing that make the icons to disappear, but the collaspe button is working again
Remove @fortawesome/fontawesome-free/js/all.js
but i recommend to use the vue component, you can also import all the icons
// main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)
// SideBarMenu.vue
import { h } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
const faIcon = (props) => {
return {
element: h('div', [h(FontAwesomeIcon, { size: 'lg', ...props })]),
}
}
...
{
href: '/',
title: 'Dashboard',
icon: faIcon({ icon: 'fa fa-user' }),
}
That works perfectly! Thank you!