Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue accordion menu

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Simple accordion menu component in Vue 2

This component lets you add an accordion menu to your vue.js app. An accordion menu can be opened and closed per item.


accordion menu

Installation

npm install --save vue-accordion-menu

Default import

Install all the components:

import Vue from 'vue'
import VueAccordionMenu from 'vue-accordion-menu'

Vue.use(VueAccordionMenu)

Use specific components:

import Vue from 'vue'
import { AccordionMenu } from 'vue-accordion-menu'

Vue.component('AccordionMenu', AccordionMenu)

A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Install all the components:

import 'vue-accordion-menu/dist/vue-accordion-menu.css'
import VueAccordionMenu from 'vue-accordion-menu/dist/vue-accordion-menu.common'

Vue.use(VueAccordionMenu)

Use specific components:

import 'vue-accordion-menu/dist/vue-accordion-menu.css'
import { AccordionMenu } from 'vue-accordion-menu/dist/vue-accordion-menu.common'

Vue.component('AccordionMenu', AccordionMenu)

You may have to setup your bundler to embed the css file in your page.**

Browser

<link rel="stylesheet" href="vue-accordion-menu/dist/vue-accordion-menu.css"/>

<script src="vue.js">script>
<script src="vue-accordion-menu/dist/vue-accordion-menu.browser.js">script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueAccordionMenu)

Use specific components:

Vue.component('AccordionMenu', VueAccordionMenu.AccordionMenu)

Source import

Install all the components:

import Vue from 'vue'
import VueAccordionMenu from 'vue-accordion-menu/src'

Vue.use(VueAccordionMenu)

Use specific components:

import Vue from 'vue'
import { AccordionMenu } from 'vue-accordion-menu/src'

Vue.component('AccordionMenu', AccordionMenu)

You need to configure your bundler to compile .vue files.** More info in the official documentation.

Usage

First of all, after installing successfully then type these command in your main.js:

import { AccordionMenu } from 'vue-accordion-menu'
Vue.component('AccordionMenu', AccordionMenu)

Now you can add some customized contents for your accordion menu (use App.vue for example):

data () {
return {
contents: [
{
title: 'How are you?',
msg: 'Test for fun!',
},
{
title: 'Who let the dog out?',
msg: 'I do not know, dude.',
},
{
title: '\xe8\x82\x9a\xe5\xad\x90\xe5\xa5\xbd\xe9\xa4\x93?',
msg: '\xe5\x90\x83\xe8\x8a\xad\xe6\xa8\x82\xe5\x95\xa6\xef\xbc\x81',
},
{
title: 'Find hotels?',
msg: 'Trivago\xef\xbc\x81',
},
],
}
}

Last step, use it in your App.vue file!

<AccordionMenu :contents="contents">AccordionMenu>

Enjoy your customized AccordionMenu!

Github: http://github.com/WeiChiaChang/vue-accordion-menu#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy