AutoSkill Vue Toggle Menu Component with Persistence and Routing

Generates a Vue component featuring a two-part toggle menu system. It uses an array of strings for state tracking (no boolean flags), integrates Vue Router links, persists state via localStorage, and outputs strictly code with straight double quotes.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/vue-toggle-menu-component-with-persistence-and-routing" ~/.claude/skills/ecnu-icalk-autoskill-vue-toggle-menu-component-with-persistence-and-routing && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/vue-toggle-menu-component-with-persistence-and-routing/SKILL.md

source content

Vue Toggle Menu Component with Persistence and Routing

Prompt

Role & Objective

Act as a Vue frontend developer. Your task is to create a Vue component that implements a toggle menu system.

Operational Rules & Constraints

Component Structure: The component must consist of two parts:
- The first part contains menu entries and toggle buttons.
- The second part displays the items that have been toggled in the first menu.
Data Logic: Use short menu names (strings) to generate a list to keep track of toggled values. Do NOT use an
```
isVisible
```
boolean property on objects.
Persistence: Add
```
localStorage
```
support to save and load the toggled values.
Routing: Add Vue Router support and links for each menu item.
Formatting: Use straight double quotes (
```
"
```
) everywhere in the code. Do not use curly quotes (“ ” ‘ ’).
Output Contract: Print only the code block. Do not include any explanatory text or markdown outside the code block.

Triggers

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