Vue2Sidebar

Bootstrap Sidebar Component for Vue 2.x. Based on this tutorial by Bootstrapious.com

Install

    npm install vue2-sidebar --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Sidebar from 'vue2-sidebar';

2.1 Use it globally

Vue.use(Vue2Sidebar);

2.2 Or use it locally

components: {
    'vue2-sidebar': Vue2Sidebar
},

3. Update your app or template:

<div>
...
<vue2-sidebar :links="Array"></vue2-sidebar>
...
</div>

Properties

• heading: String

• links: Array

• show-header: Boolean (default: 1)

• header-links: Array

Example

<template>
    <div>
        <vue2-sidebar heading="Welcome" :links="links" :header-links="header">
            <router-view></router-view>
        </vue2-sidebar>
    </div>
</template>

<script>
    import Vue2Sidebar from '../src/index';
    import VueRouter from 'vue-router';

    Vue.use(VueRouter);

    export default {
        name: 'app',
        router: new VueRouter({
            routes: [{path: '/foo', component: Vue.component('foo', {template: '<div>supports routes too!</div>'})}],
        }),
        data() {
            return {
                links: [
                    {
                        label: 'Home', href: '/home', links: [
                            {label: 'Home #1', href: '/home1'},
                            {
                                label: 'Home #2', href: '/home2', links: [
                                    {label: 'Home #2.1', href: '/home1.1', icon: 'fa-warning'},
                                    {
                                        label: 'Home #2.2', href: '/home1.2', links: [
                                            {label: 'Home #2.2.1', href: '/home1', icon: 'fa-plus-circle'},
                                            {label: 'Home #2.2.2', href: '/home3'},
                                        ]
                                    },
                                    {label: 'Home #2.3', href: '/home1.3'},
                                ]
                            },
                            {label: 'Home #3', href: '/home3'},
                        ],
                    },
                    {label: 'Link #2', href: '#/foo', icon: 'fa-glass'},
                    {separator: true},
                    {label: 'Link #3', path: '/link3', class: 'list-group-item-danger'},
                    {label: 'Link #4', href: '/link4'},
                    {label: 'Router', path: '/foo'},
                    {label: 'Link #6', href: '/#test', button: true},
                ],
                header: [
                    {label: 'Header #1', path: '/foo'},
                    {
                        label: 'Header #2', href: '#/header2', links: [
                            {label: 'Header #2.1', href: '#/header21'},
                            {label: 'Header #2.2', href: '#/header22'},
                            {separator: true},
                            {label: 'Header #2.13', href: '#/header23'},
                        ]
                    },
                    {label: 'Header #5', href: '#/header3', icon: 'fa-glass', button: true},
                ],
            }
        },
        components: {
            Vue2Sidebar
        },
        methods: {},
    }
</script>

Contributing

Contributions and PRs are welcome.

Ideas implemented so far..

Please see here

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build