vue-composables_skill

Overview

This skill provides practical patterns for building Vue 3 composables in Nuxt 4 with localStorage persistence and SSR-safe behavior. It focuses on three ready-to-use composables—useProgress, useQuiz, and useCertificate—plus SSR compatibility tips and TypeScript-friendly conventions. Use it to standardize state management, persistence, and client-only features across learning or quiz-style apps.

How this skill works

Each composable encapsulates private reactive state, computed values, and actions, then returns a readonly public API to prevent external mutation. useProgress stores structured progress in useState and mirrors data to localStorage on the client. useQuiz manages question flow, answers, scoring, and completion. useCertificate generates IDs, calculates hours, and builds client-side PDFs using dynamic imports (html2canvas, jsPDF). All composables guard client-only APIs with typeof window checks or onMounted.

When to use it

• Creating reusable stateful logic for lessons, quizzes, or certificates in Nuxt 4
• Persisting user progress or quiz results to localStorage while staying SSR-safe
• Sharing progress across components using Nuxt's useState
• Generating client-side PDFs or downloadable certificates
• Implementing quiz navigation, scoring, and answer validation logic

Best practices

• Expose state with readonly() to prevent accidental external mutation
• Use useState for shared, SSR-safe reactive state and initialize from localStorage when available
• Always check typeof window or set a client flag (onMounted) before touching localStorage or DOM
• Wrap localStorage operations in try/catch to handle quota or privacy mode failures
• Prefer dynamic imports for browser-only libraries (html2canvas, jsPDF) and keep generation client-side
• Type all inputs and returns with TypeScript for clearer APIs and safer ref handling

Example use cases

• Track user progress across phases, topics, and subtopics and persist it between sessions
• Drive a quiz UI: navigate questions, submit answers, calculate percent score and pass/fail
• Generate and download a printable certificate with unique ID and calculated total hours
• Export/import progress JSON for portability or admin review
• Reset progress for testing or to let a learner retake a course