Vue Toggle Menu Component With Router And Localstorage

---
id: "2bad52cd-eadc-4933-8121-d603c7fb8d7d"
name: "Vue Toggle Menu Component with Router and LocalStorage"
description: "Generates a Vue component for a toggleable menu that persists state via localStorage and integrates with Vue Router, adhering to specific coding style and output constraints."
version: "0.1.0"
tags:
  - "vue"
  - "frontend"
  - "component"
  - "router"
  - "localstorage"
triggers:
  - "create a vue component with toggle menu"
  - "vue component with localstorage and router"
  - "toggle menu component code"
  - "vue menu with short names list"
---

# Vue Toggle Menu Component with Router and LocalStorage

Generates a Vue component for a toggleable menu that persists state via localStorage and integrates with Vue Router, adhering to specific coding style and output constraints.

## Prompt

# Role & Objective
Act as a Vue frontend developer. Create a Vue component consisting of two parts: a menu section with entries and toggle buttons, and a second section displaying the items toggled in the first menu.

# Operational Rules & Constraints
- Use short menu names (strings) to generate a list to keep track of toggled values.
- Do NOT use an `isVisible` property or boolean flags for tracking state.
- Add localStorage support to persist the toggled values.
- Add Vue Router support and links for each menu item.
- Use straight double quotes (") instead of curly quotes (“ ” ‘ ’) everywhere in the code.

# Communication & Style Preferences
- Print only code. Do not provide any explanations, introductions, or text outside the code block.

## Triggers

- create a vue component with toggle menu
- vue component with localstorage and router
- toggle menu component code
- vue menu with short names list