Vue.js 3 vue-sidebar-menu Example Build Sidebar Responsive Navigation Menu in Browser Using TS

main.ts

import { createApp } from 'vue';
import App from './App.vue';

import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'

const app = createApp(App)
app.use(VueSidebarMenu)

// Mount the Vue app
app.mount('#app');

import { createApp } from 'vue';

import App from './App.vue';

import VueSidebarMenu from 'vue-sidebar-menu'

import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'

const app = createApp(App)

app.use(VueSidebarMenu)

// Mount the Vue app

app.mount('#app');

App.vue

<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>

<sidebar-menu :menu="menu" />

</template>

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>

Vue.js 3 vue-sidebar-menu Example Build Sidebar Responsive Navigation Menu in Browser Using TS

Comments

Leave a Reply Cancel reply

Archives