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