AutoSkill 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.

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/vue-toggle-menu-component-with-router-and-localstorage" ~/.claude/skills/ecnu-icalk-autoskill-vue-toggle-menu-component-with-router-and-localstorage && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8/vue-toggle-menu-component-with-router-and-localstorage/SKILL.md

source content

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