Vue Hamburgers

Display a burger for menu as component, fork from github.com/jonsuh/hamburgers, you can choose hamburger animation with prop type. Check jonsuh.com/hamburgers for examples.

Documentation

Install it with Yarn or NPM

yarn add -vue-hamburgers

OR

npm i vue-hamburgers --save

Import it, ES6 way, in main.js / app.js file

import hamburger from 'vue-hamburgers'

Vue.use(hamburger)

For Nuxt.js

Create a plugin like plugins/vue-hamburgers.js

import Vue from 'vue'
import hamburger from 'vue-hamburgers'

Vue.use(hamburger)

In nuxt.config.js import plugin

export default {
  // ...
  plugins: [
    { src: '@/plugins/vue-hamburgers', mode: 'client' },
  ],
  // ...
}

In any .vue component import in with <client-only>

<template>
  <client-only>
    <hamburger />
  </client-only>
</template>

Usage

Use it in a .vue file

<template>
  <div>
    <hamburger />
  </div>
</template>

Define type with prop type

<div>
  <hamburger type="3dx" />
</div>

API

<template>
  <hamburger
    type="spring"
    :width="30"
    :height="3"
    :spacing="0.8"
    color="red"
  />
</template>

Check all available type on jonsuh.com/hamburgers, use it in lowercase like this type="arrow"

| Props | Type | Default | Describe | |--------------|---------|---------|----------------------------------------------------------------------------| | type | String | 'spring' | Type of hamburger animation | | width | Number / String | 40 | Define width of hamburger | | height | Number / String | 4 | Define height of bars of hamburger | | spacing | Number / String | 1 | Define spacing between bars of hamburger, reduce with '0.8' or increase with '1.2' | | color | String | #000000 | Set color with hexa code |

License

MIT © @jonsuh, @ewilan-riviere