{"id":12412,"library":"vue-burger-menu","title":"Vue Burger Menu","description":"Vue Burger Menu is a Vue.js component that provides a collection of off-canvas sidebar menu effects and styles. It leverages CSS transitions and SVG path animations to deliver various hamburger menu experiences, such as sliding, scaling, rotating, and revealing effects. The library is currently at version 2.0.5, with its latest release six years ago, indicating a maintenance-focused cadence rather than active feature development. Key differentiators include its ready-to-use animations, customizable properties like width and position, and event hooks for managing menu state. It abstracts away complex CSS and SVG animations into easy-to-use Vue components, supporting Vue 2 and likely Vue 3 (though a separate `vue3-burger-menu` package also exists). The package aims to save screen space on mobile devices by hiding navigation until a user action reveals it.","status":"maintenance","version":"2.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/mbj36/vue-burger-menu","tags":["javascript","vuejs","menu","hamburger","sidebar"],"install":[{"cmd":"npm install vue-burger-menu","lang":"bash","label":"npm"},{"cmd":"yarn add vue-burger-menu","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-burger-menu","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Each animation style (e.g., Slide, Push, Reveal) is a named export. Do not use a default import.","wrong":"import Slide from 'vue-burger-menu'","symbol":"Slide","correct":"import { Slide } from 'vue-burger-menu'"},{"note":"CommonJS `require()` syntax is generally not supported for this module's exports; use ES module `import`.","wrong":"const PushRotate = require('vue-burger-menu')","symbol":"PushRotate","correct":"import { PushRotate } from 'vue-burger-menu'"},{"note":"You can import all available animations as a namespace object if you need to dynamically reference them.","symbol":"* as BurgerMenuAnimations","correct":"import * as BurgerMenuAnimations from 'vue-burger-menu'"}],"quickstart":{"code":"npm install vue-burger-menu --save\n\n// In a Vue component (e.g., App.vue)\n<template>\n  <div id=\"app\">\n    <Slide :isOpen=\"isMenuOpen\" @openMenu=\"handleOpenMenu\" @closeMenu=\"handleCloseMenu\">\n      <a id=\"home\" href=\"#\"><span>Home</span></a>\n      <a id=\"about\" href=\"#\"><span>About</span></a>\n      <a id=\"contact\" href=\"#\"><span>Contact</span></a>\n    </Slide>\n    <main id=\"page-wrap\">\n      <h1>My Application Content</h1>\n      <p>Click the burger icon to open the menu.</p>\n      <button @click=\"toggleMenu\">Toggle Menu from App</button>\n    </main>\n  </div>\n</template>\n\n<script>\nimport { Slide } from 'vue-burger-menu';\n\nexport default {\n  name: 'App',\n  components: {\n    Slide\n  },\n  data() {\n    return {\n      isMenuOpen: false\n    };\n  },\n  methods: {\n    handleOpenMenu() {\n      this.isMenuOpen = true;\n      console.log('Menu opened');\n    },\n    handleCloseMenu() {\n      this.isMenuOpen = false;\n      console.log('Menu closed');\n    },\n    toggleMenu() {\n      this.isMenuOpen = !this.isMenuOpen;\n    }\n  }\n};\n</script>\n\n<style>\nbody { margin: 0; font-family: sans-serif; }\n#app { /* Required for some animations like Push/PushRotate */ }\n#page-wrap { padding: 20px; }\n</style>","lang":"javascript","description":"Demonstrates installation, basic usage of the `Slide` animation, registering the component, passing menu items as slots, and controlling the menu's open state programmatically with event handlers."},"warnings":[{"fix":"Ensure your application HTML includes `<main id=\"page-wrap\">` for content and `<div id=\"app\">` for the overall wrapper, then pass these IDs as props: `<Push pageWrapId=\"page-wrap\" appId=\"app\" />`.","message":"Several advanced animations (e.g., `Push`, `PushRotate`, `ScaleDown`, `ScaleRotate`, `Reveal`) require specific HTML structure: a `pageWrapId` element wrapping your main content and an `appId` element containing everything, including the menu component. Failing to provide these elements and corresponding `pageWrapId` and `appId` props will prevent these animations from working correctly.","severity":"gotcha","affected_versions":">=0.0.8"},{"fix":"Avoid using WIP animations in production environments. Stick to stable animations like `Slide`, `Push`, `ScaleDown`, `ScaleRotate`, `Reveal`, or `PushRotate`.","message":"Some animations listed in the documentation (e.g., `FallDown`, `Stack`, `Elastic`, `Bubble`) are marked as 'Work In Progress' (WIP). These animations may be incomplete, unstable, or not function as expected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like `vue3-burger-menu` for Vue 3 projects, or be prepared to fork and maintain the code yourself for newer Vue environments.","message":"The package's latest release (v2.0.5) was over six years ago (March 2020), suggesting infrequent maintenance. While functional, it may not receive updates for newer Vue versions (e.g., Vue 3+ features like Composition API) or modern browser changes.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"To open from the right: `<Slide right />`. To set a custom width: `<Slide width=\"250px\" />` or `<Slide :width=\"400\" />`.","message":"By default, the menu opens from the left and has a width of `300px`. To change these, you must explicitly use the `right` boolean prop or the `width` string prop (e.g., `width=\"400\"`).","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the component is imported and correctly listed in the `components` option of your Vue component: `import { Slide } from 'vue-burger-menu'; export default { components: { Slide } }`.","cause":"The imported burger menu component (e.g., `Slide`, `Push`) was not registered with the Vue application or component.","error":"Failed to resolve component: [AnimationName]"},{"fix":"Run `npm install vue-burger-menu --save` or `yarn add vue-burger-menu` to install the package. Verify the import path `from 'vue-burger-menu'` is correct.","cause":"The `vue-burger-menu` package is not installed in your project's `node_modules` or the import path is incorrect.","error":"Module not found: Error: Can't resolve 'vue-burger-menu' in '...' or similar `webpack` or `vite` error."},{"fix":"For animations like `Push` or `ScaleDown`, ensure your template includes `<div id=\"app\">...<main id=\"page-wrap\">...</main></div>` and your component uses props like `<Push pageWrapId=\"page-wrap\" appId=\"app\" />`.","cause":"Using an animation that requires `pageWrapId` or `appId` props without providing the corresponding HTML structure and prop values.","error":"Menu appears but page content does not move/scale, or menu is positioned incorrectly."}],"ecosystem":"npm"}