\n
\n Welcome, {{ authStore.user?.name }}
\n \n\n \n
\n\n```\n\n### Destructuring with Reactivity\n\nUse `storeToRefs` to destructure while maintaining reactivity:\n\n```vue\n\n```\n\n## Store Organization\n\nKeep stores focused on a single domain:\n\n```\nsrc/stores/\nโโโ authStore.ts # Authentication state\nโโโ cartStore.ts # Shopping cart\nโโโ userStore.ts # User profile\nโโโ productStore.ts # Product catalog\n```\n\n### Composing Stores\n\nStores can use other stores:\n\n```typescript\n// src/stores/cartStore.ts\nimport { defineStore } from 'pinia'\nimport { useAuthStore } from './authStore'\n\nexport const useCartStore = defineStore('cartStore', () => {\n const authStore = useAuthStore()\n\n async function checkout() {\n if (!authStore.isAuthenticated) {\n throw new Error('Must be logged in to checkout')\n }\n // ... checkout logic\n }\n\n return { checkout }\n})\n```\n\n## When to Use Stores\n\n**Use Pinia stores for:**\n\n- Authentication state (current user, tokens)\n- Data shared across multiple components\n- Data that persists across route changes\n- Complex state with many actions\n\n**Use local component state for:**\n\n- Form inputs\n- UI state (modals, dropdowns)\n- Data used by a single component\n- Temporary state that resets on navigation\n\n**Rule of thumb:** Start with local state. Extract to a store when you need to share state across components or persist it across routes.\n"
},
{
"path": "docs/tech.md",
"content": "# Languages and Technologies\n\n- [TypeScript](#typescript)\n - [Why TypeScript](#why-typescript)\n - [Configuration](#configuration)\n - [TypeScript FAQ](#typescript-faq)\n- [Vue](#vue)\n - [Composition API](#composition-api)\n - [Vue Router](#vue-router)\n - [Pinia](#pinia)\n- [HTML](#html)\n - [Templates](#templates)\n - [Render Functions](#render-functions)\n- [CSS](#css)\n - [SCSS](#scss)\n - [Scoped Styles](#scoped-styles)\n - [Design Variables](#design-variables)\n - [Global CSS](#global-css)\n - [CSS FAQ](#css-faq)\n\n## TypeScript\n\nThis project uses TypeScript for type safety and improved developer experience. All `.ts` and `.vue` files are type-checked.\n\n### Why TypeScript\n\n- **Catch errors early** โ Type errors are caught at build time, not runtime\n- **Better IDE support** โ Autocomplete, refactoring, and inline documentation\n- **Self-documenting code** โ Types serve as documentation for function signatures\n- **Vue 3 designed for it** โ Vue 3 and its ecosystem have first-class TypeScript support\n\n### Configuration\n\nTypeScript is configured in multiple files:\n\n| File | Purpose |\n|------|---------|\n| `tsconfig.json` | Base configuration, references other configs |\n| `tsconfig.app.json` | Application code configuration |\n| `tsconfig.node.json` | Node.js tooling (Vite config, etc.) |\n| `tsconfig.vitest.json` | Test configuration |\n\nKey settings:\n\n```json\n{\n \"compilerOptions\": {\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true\n }\n}\n```\n\n### Migrating from JavaScript\n\nIf migrating an existing JavaScript codebase, enable `allowJs` in `tsconfig.json` for progressive migration:\n\n```json\n{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"checkJs\": false\n }\n}\n```\n\nThis allows `.js` and `.ts` files to coexist, so you can migrate file-by-file without being blocked by TypeScript errors across the entire codebase. Once migration is complete, disable `allowJs` to enforce TypeScript everywhere.\n\n**Migration strategy:**\n1. Enable `allowJs`, disable `checkJs`\n2. Rename files from `.js` to `.ts` one at a time\n3. Fix type errors in each file as you convert\n4. Once all files are `.ts`, disable `allowJs`\n\n### TypeScript FAQ\n\n**How strict should we be with types?**\n\nAim for full type coverage, but pragmatism over perfection. Use `any` sparingly and document why when you do. The `unknown` type is often a better choice when the type is truly unknown.\n\n**Should I use `interface` or `type`?**\n\n- Use `interface` for object shapes that might be extended\n- Use `type` for unions, primitives, and utility types\n\n```typescript\n// Interface for objects\ninterface User {\n id: string\n name: string\n}\n\n// Type for unions\ntype Status = 'pending' | 'active' | 'completed'\n```\n\n## Vue\n\nThis project uses [Vue 3](https://vuejs.org/) with the Composition API.\n\n### Composition API\n\nThis boilerplate uses `\n```\n\n### Options API\n\nThe Options API is still fully supported in Vue 3 and remains a valid choice:\n\n```vue\n\n```\n\n### Which API to Choose?\n\nBoth APIs are production-ready. Choose based on your team's needs:\n\n| Factor | Composition API | Options API |\n|--------|-----------------|-------------|\n| TypeScript | Better type inference | Requires `defineComponent` wrapper |\n| Code organization | Organize by feature/concern | Organize by option type |\n| Learning curve | Steeper for Vue beginners | More familiar structure |\n| Logic reuse | Composables | Mixins (less flexible) |\n| Bundle size | Better tree-shaking | Slightly larger |\n\n**This boilerplate uses Composition API because:**\n- Better TypeScript integration\n- Composables are more flexible than mixins\n- Aligns with Vue ecosystem direction\n\n**Options API is a good choice when:**\n- Team is more familiar with it\n- Migrating from Vue 2 incrementally\n- Simpler components that don't need composables\n\nFor a deeper comparison, read the [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html).\n\n### Vue Router\n\n[Vue Router 4](https://router.vuejs.org/) handles client-side routing. See [routing.md](routing.md) for project-specific patterns.\n\nKey resources:\n- [Getting Started](https://router.vuejs.org/guide/)\n- [Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)\n- [Route Meta Fields](https://router.vuejs.org/guide/advanced/meta.html)\n\n### Pinia\n\n[Pinia](https://pinia.vuejs.org/) handles state management. See [state.md](state.md) for project-specific patterns.\n\nKey resources:\n- [Getting Started](https://pinia.vuejs.org/getting-started.html)\n- [Defining a Store](https://pinia.vuejs.org/core-concepts/)\n- [Using Stores](https://pinia.vuejs.org/core-concepts/#using-the-store)\n\n## HTML\n\nAll HTML lives in `.vue` files, either in `` blocks or render functions.\n\n### Templates\n\nTemplates are the default and recommended approach for most components:\n\n```vue\n\n \n ![]()
\n
\n\n```\n\nVue templates support:\n- Self-closing tags: `{{ user.name }}
\n\n
\n\n\n\n"
},
{
"path": "src/main.ts",
"content": "import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport { createHead } from '@unhead/vue'\n\nimport App from '@/App.vue'\nimport router from '@/router/index'\n\nconst app = createApp(App)\n\n/** Pinia **/\n/** https://pinia.vuejs.org/ **/\nconst pinia = createPinia()\napp.use(pinia)\n\n/** Vue Router **/\n/** https://router.vuejs.org/ **/\napp.use(router)\n\n/** Unhead **/\n/** https://unhead.unjs.io/ **/\nconst head = createHead()\napp.use(head)\n\napp.mount('#app')\n"
},
{
"path": "src/pages/about.vue",
"content": "\n\n\n \n
\n\n\n\n"
},
{
"path": "src/pages/index.vue",
"content": "\n\n\n This is an about page
\nHome Page
\n![\"Vue](\"@/assets/logo.svg\"){kind=logo}
\n