Vue.js/Nuxt-frontendengineer Claude Skill

Name: Vue-ontwikkelaar AI Skill - Zosia
Brand: KissMySkills
Price: 19 USD
Availability: InStock

Vue Developer, Zosia AI skill by KissMySkills, cover

Diagnoseer reactiviteitsbugs in Vue bij de daadwerkelijke ref of watcher, kies per route de renderingmodus van Nuxt en los hydratatiemismatches bij de daadwerkelijke bron op.

$19 deze skill eenmalig betalen voor altijd van jou

Claude-skillpakket directe downloadzosia-vue-nuxt-frontend-engineer.skill

Library-plan

Krijg deze skill en 2.500+ andere

$9/mnd of $59 per jaar

Neem Library · $9/mndNeem Library

Probeer deze skill 7 dagen gratisGratis proberen

7 dagen gratis, geen creditcard
Altijd opzegbaar
30 dagen geld terug op je eerste betaling

Er wordt niets afgeschreven. 2 dagen voor het einde van de proefperiode krijg je een −30%-code voor je eerste betaling.

Werkt in Claude, ChatGPT, Claude Code, Codex en Cursor via één connector
Alle skills, promptbundels en agents, plus AI CRM en tools tijdens de proefperiode
Altijd opzegbaar

Waarom een abonnement? Zo werkt het

Heb je alleen deze skill nodig?

Eén bestand, eenmalig betaald. Geen updates, geen connector.

Kost ongeveer evenveel als 2 maanden Library.

$19

Eén keer betalen, voor altijd van jouDirecte download30 dagen geld-terug-garantie

Bekend vanProduct Hunt Fazier KittyLaunch

Werkt met

Veilig afrekenen via Stripe

Handelsmerken van hun respectieve eigenaren. KissMySkills is niet aan hen verbonden of door hen goedgekeurd.

Zo werkt het

Ask it something hard.

📎 zosia-vue-nuxt-frontend-engineer.skillLOADED ✓

200 componenten migreren van de Vue 2 Options API naar Vue 3, en mijn team blijft composables schrijven die gewoon hernoemde mixins zijn. Wat is het daadwerkelijke patroon?

CLAUDE · WITH THIS SKILL Een composable die een grabbelton met niet-gerelateerde state teruggeeft, is een mixin met een paspoort — het patroon is één zorg per composable: useOrderFilters beheert alleen de filterstatus, geeft benoemde refs en functies terug, gebruikt geen this en veroorzaakt geen stille eigenschapsconflicten. Voor 200 componenten: begin met leaf-componenten, daarna gedeelde state, en converteer stabiele Options-componenten helemaal niet — Vue 3 ondersteunt beide API’s naast elkaar, en converteren omwille van de zuiverheid is hoe migraties bij 60% vastlopen. Let op de randen van reactiviteit: gedestructureerde props verliezen hun reactiviteit zonder toRefs, en reactive() verliest tracking bij het spreiden. Gaat Vuex over naar Pinia? Die volgorde is belangrijker dan de componenten.

Of elke skill, direct in jouw AI.

0:16 · zonder geluid

Alle 2.500+ met Library · $9/mnd →

Vragen voor je koopt? Een mens antwoordt, meestal dezelfde dag: hello@kissmyskills.com

// het bestand zelf

Lees het voordat je het koopt.

De eerste regels van het bestand dat je AI leest, precies zoals het geleverd wordt. Niets herschreven voor deze pagina.

// de skill waar jouw AI op draait

Je bent Zosia, een Senior Vue.js- en Nuxt-frontend-engineer die werkt met de Composition API, het reactiviteitssysteem, Pinia en Vitest. Je bent geactiveerd om de gebruiker te helpen een productieklare Vue 3- of Nuxt 3-frontend te bouwen.

Haal Zosia bij Claude en krijg een Senior Vue.js/Nuxt Frontend Engineer die productie-Nuxt-apps heeft uitgebracht en onderhouden tijdens de overgang van Vue 2 naar Vue 3 en van de Options API naar de Composition API. Zosia behandelt Vue niet als "React met een andere syntaxis". Ze werkt vanuit Vue's werkelijke mentale model: een fijnmazig reactiviteitssysteem op basis van proxies, single-filecomponents waarin template, script en style bewust bij elkaar staan, en een Composition API die is opgebouwd rond composables in plaats van hooks met dependency-arrays. Ze kiest de renderingmodus, de vorm van statebeheer en de grens van composables die passen bij de daadwerkelijke gegevensstroom van de app, en ze kan in begrijpelijke taal uitleggen waarom een reactieve waarde niet meer reageerde voordat ze ook maar één regel code aanpast. Zosia beheerst het volledige frontend-engineeringoppervlak voor Vue 3 en Nuxt 3: architectuur van de Composition API en ontwerp van composables, het reactiviteitssysteem (refs versus reactive, computed-caching, watch versus

SKILL.md · 237 regels · directe download

// wat erin zit

Wat zit er in deze skill?

Diagnose van reactiviteit bij de exacte ref of watcher
Oorzaak van de hydration-mismatch met de benoemde render
De renderingsmodus wordt per route bepaald, niet per project
Herstelplan met de wijzigingen op componentniveau opgesomd

Vue- en Nuxt-ontwikkelaars die hydratatiewaarschuwingen en reactiviteit debuggen die stilletjes faalt.

// twee manieren om het te krijgen

Gebruik het in je AI, of download het één keer.

Library-abonnement

Deze skill en 2.500+ andere, in je chat

$9/mnd altijd opzegbaar, of $59 per jaar

Alle 2.500+ skills, promptpakketten en agents, geladen zodra je erom vraagt
Niets te downloaden of te plakken: koppel één keer in Claude, ChatGPT, Claude Code of Cursor
Elke week nieuwe skills en 10 catalogusbestanden per maand om te downloaden

Neem Library · $9/mnd 7 dagen gratis proberen

Vergelijk Library, AI CRM en Both

Eenmalig kopen

Alleen deze skill, als bestand

$19 eenmalige betaling

Download na het afrekenen en plak het in elke AI-chat
Eén bestand, geen updates, geen connector
30 dagen geld-terug-garantie

Heb je al Library of Both? Deze zit erbij, je hoeft het bestand niet te kopen.

Werkt met

Handelsmerken van hun respectieve eigenaren. KissMySkills is niet aan hen verbonden of door hen goedgekeurd.

// vraag het je assistent

Of laat je AI deze skill voor je instellen.

Ga naar kissmyskills.com/pages/connector en stel de skill "Vue-ontwikkelaar AI Skill - Zosia" (handle: zosia-vue-js-nuxt-frontend-engineer-ai-skill) voor me in

Plak hem in Claude, ChatGPT, Claude Code, Cursor of Codex. Je AI helpt je KissMySkills te koppelen (ongeveer 3 minuten, 7 dagen gratis proberen) en laadt de skill. Wat je AI gaat lezen →

Wat je echt koopt

Behandel Vue's reactiviteitssysteem niet alsof het Reacts re-render-model is.

Zosia is een vaardigheid voor een Senior Vue.js/Nuxt Frontend Engineer, gebaseerd op Vue's daadwerkelijke mentale model: een fijnmazig, op proxies gebaseerd reactiviteitssysteem, single-filecomponenten en een Composition API die is opgebouwd rond composables in plaats van hooks met afhankelijkheidsarrays. Ze behandelt architectuur voor de Composition API en het ontwerpen van composables, het reactiviteitssysteem (refs, reactive, computed-caching, watchers), statebeheer met Pinia, de renderingstrategie van Nuxt (SSR, SSG, hybride rendering via routeRules op Nitro), routering en layouts op basis van bestanden, SEO-/metabeheer, testen met Vitest/Vue Test Utils en migraties van Vue 2 naar 3 of van de Options API naar de Composition API.

Voor wie

Frontend-engineers die met Vue en Nuxt werken en teams die migreren van Vue 2 of de Options API.

Belangrijkste mogelijkheden

Controleert bij een "reactiviteitsbug" eerst of een reactive()-object is gedestructureerd, of .value niet is uitgepakt, of dat een afhankelijkheid buiten een reactieve context wordt gelezen, voordat ze ergens anders zoekt.
Beveelt pas een Pinia-store aan nadat is vastgesteld dat een composable met lokale state de taak echt niet kan uitvoeren.
Kiest de renderingstrategie van Nuxt per route via routeRules (SSR, SSG, hybride) in plaats van één globale modus voor de hele app.
Diagnosticeert hydration-mismatches aan de hand van de daadwerkelijke afwijking tussen server en client (client-only-waarden, niet-deterministische inhoud) in plaats van alles standaard in ClientOnly te wikkelen.
Stelt met Vitest en Vue Test Utils testdekking op die is afgestemd op het daadwerkelijke risico in de composable, store of component die wordt getest.

Zo gebruik je het

Plak Zosia's SKILL.md in de instructies van je Claude-project (of in de systeemprompt van elk AI-systeem) en beschrijf vervolgens je probleem als vue.js/nuxt frontend-engineer. Werkt met Claude, ChatGPT en elke AI-chat. In minder dan 2 minuten geïnstalleerd.

// zo installeer je In minder dan 2 minuten

Vier stappen. Elke AI-chat.

01
Download het bestand
Na het afrekenen staat de downloadlink in je inbox. Bewaar het .skill-bestand: Claude neemt het aan zoals het is.
02
Open je AI-chat
Elke AI-chat die je al gebruikt: Claude, ChatGPT, Gemini, Grok, Copilot of een andere.
03
Voeg het toe aan je AI
Claude: upload het .skill-bestand via Settings → Capabilities → Skills. ChatGPT, Gemini en andere: open het .skill-bestand als een .zip-archief en plak SKILL.md in de aangepaste instructies of projectinstructies.
04
Ga aan de slag
Je AI is nu geconfigureerd als specialist. Vraag hem alles binnen zijn vakgebied.

Geen technische kennis vereist.

Met Library hoef je niets te downloaden. Koppel je AI één keer en vraag dan: "Laad Vue-ontwikkelaar AI Skill van KissMySkills."

Installatiegids → Library · $9/mnd →

// faq

Vragen over dit product

Met welke AI-tools werkt dit?+

Elke AI-chat die aangepaste instructies accepteert - Claude, ChatGPT, Gemini en andere. Plak de inhoud van SKILL.md in de projectinstructies of systeemprompt.

Hoe installeer ik het?+

Download het bestand en plak de volledige inhoud ervan in het veld voor aangepaste instructies, projectinstructies of systeemprompt van je AI. Het duurt minder dan 2 minuten.

Is dit een cursus of een tool?+

Het is een tool - een gestructureerde expertpersona en workflow, geen videocursus. Je gebruikt hem direct door hem in je AI-chat te plakken.

Wat controleert Zosia als eerste bij een gemelde "reactiviteitsbug"?+

Het destructureren van een reactive()-object, een ontbrekende .value-unwrap of het uitlezen van een dependency buiten een reactieve context - deze drie verklaren de meeste gemelde Vue-bugs, en Zosia controleert ze voordat ze ergens anders kijkt.