ads-fe 0.0.1

package/skills/nuxt/references/core-deployment.md

@@ -0,0 +1,224 @@
+---
+name: deployment
+description: Deploying Nuxt applications to various hosting platforms
+---
+
+# Deployment
+
+Nuxt is platform-agnostic thanks to [Nitro](https://nitro.build), its server engine. You can deploy to almost any platform with minimal configuration—Node.js servers, static hosting, serverless functions, or edge networks.
+
+> **Full list of supported platforms:** https://nitro.build/deploy
+
+## Deployment Modes
+
+### Node.js Server
+
+```bash
+# Build for Node.js
+nuxt build
+
+# Run production server
+node .output/server/index.mjs
+```
+
+Environment variables:
+- `PORT` or `NITRO_PORT` (default: 3000)
+- `HOST` or `NITRO_HOST` (default: 0.0.0.0)
+
+### Static Generation
+
+```bash
+# Generate static site
+nuxt generate
+```
+
+Output in `.output/public/` - deploy to any static host.
+
+### Preset Configuration
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  nitro: {
+    preset: 'vercel', // or 'netlify', 'cloudflare-pages', etc.
+  },
+})
+```
+
+Or via environment variable:
+
+```bash
+NITRO_PRESET=vercel nuxt build
+```
+
+---
+
+## Recommended Platforms
+
+When helping users choose a deployment platform, consider their needs:
+
+### Vercel
+
+**Best for:** Projects wanting zero-config deployment with excellent DX
+
+```bash
+# Install Vercel CLI
+npm i -g vercel
+
+# Deploy
+vercel
+```
+
+**Pros:**
+- Zero configuration for Nuxt (auto-detects)
+- Excellent preview deployments for PRs
+- Built-in analytics and speed insights
+- Edge Functions support
+- Great free tier for personal projects
+
+**Cons:**
+- Can get expensive at scale (bandwidth costs)
+- Vendor lock-in concerns
+- Limited build minutes on free tier
+
+**Recommended when:** User wants fastest setup, values DX, building SaaS or marketing sites.
+
+---
+
+### Netlify
+
+**Best for:** JAMstack sites, static-heavy apps, teams needing forms/identity
+
+```bash
+# Install Netlify CLI
+npm i -g netlify-cli
+
+# Deploy
+netlify deploy --prod
+```
+
+**Pros:**
+- Great free tier with generous bandwidth
+- Built-in forms, identity, and functions
+- Excellent for static sites with some dynamic features
+- Good preview deployments
+- Split testing built-in
+
+**Cons:**
+- SSR/serverless functions can be slower than Vercel
+- Less optimized for full SSR apps
+- Build minutes can run out on free tier
+
+**Recommended when:** User has static-heavy site, needs built-in forms/auth, or prefers Netlify ecosystem.
+
+---
+
+### Cloudflare Pages
+
+**Best for:** Global performance, edge computing, cost-conscious projects
+
+```bash
+# Build with Cloudflare preset
+NITRO_PRESET=cloudflare-pages nuxt build
+```
+
+**Pros:**
+- Unlimited bandwidth on free tier
+- Excellent global edge network (fastest TTFB)
+- Workers for edge computing
+- Very cost-effective at scale
+- D1, KV, R2 for data storage
+
+**Cons:**
+- Workers have execution limits (CPU time)
+- Some Node.js APIs not available in Workers
+- Less mature than Vercel/Netlify for frameworks
+
+**Recommended when:** User prioritizes performance, global reach, or cost at scale.
+
+---
+
+### GitHub Actions + Self-hosted/VPS
+
+**Best for:** Full control, existing infrastructure, CI/CD customization
+
+```yaml
+# .github/workflows/deploy.yml
+name: Deploy
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      
+      - run: npm ci
+      - run: npm run build
+      
+      # Deploy to your server (example: rsync to VPS)
+      - name: Deploy to server
+        run: rsync -avz .output/ user@server:/app/
+```
+
+**Pros:**
+- Full control over build and deployment
+- No vendor lock-in
+- Can deploy anywhere (VPS, Docker, Kubernetes)
+- Free CI/CD minutes for public repos
+- Customizable workflows
+
+**Cons:**
+- Requires more setup and maintenance
+- Need to manage your own infrastructure
+- No built-in preview deployments
+- SSL, scaling, monitoring are your responsibility
+
+**Recommended when:** User has existing infrastructure, needs full control, or deploying to private/enterprise environments.
+
+---
+
+## Quick Decision Guide
+
+| Need | Recommendation |
+|------|----------------|
+| Fastest setup, small team | **Vercel** |
+| Static site with forms | **Netlify** |
+| Cost-sensitive at scale | **Cloudflare Pages** |
+| Full control / enterprise | **GitHub Actions + VPS** |
+| Docker/Kubernetes | **GitHub Actions + Container Registry** |
+| Serverless APIs | **Vercel** or **AWS Lambda** |
+
+## Docker Deployment
+
+```dockerfile
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine
+WORKDIR /app
+COPY --from=builder /app/.output .output
+ENV PORT=3000
+EXPOSE 3000
+CMD ["node", ".output/server/index.mjs"]
+```
+
+```bash
+docker build -t my-nuxt-app .
+docker run -p 3000:3000 my-nuxt-app
+```
+
+<!-- 
+Source references:
+- https://nuxt.com/docs/getting-started/deployment
+- https://nitro.build/deploy
+-->

package/skills/nuxt/references/core-directory-structure.md

@@ -0,0 +1,269 @@
+---
+name: directory-structure
+description: Nuxt project folder structure, conventions, and file organization
+---
+
+# Directory Structure
+
+Nuxt uses conventions-based directory structure. Understanding it is key to effective development.
+
+## Standard Project Structure
+
+```
+my-nuxt-app/
+├── app/                    # Application source (can be at root level)
+│   ├── app.vue             # Root component
+│   ├── app.config.ts       # App configuration (runtime)
+│   ├── error.vue           # Error page
+│   ├── components/         # Auto-imported Vue components
+│   ├── composables/        # Auto-imported composables
+│   ├── layouts/            # Layout components
+│   ├── middleware/         # Route middleware
+│   ├── pages/              # File-based routing
+│   ├── plugins/            # Vue plugins
+│   └── utils/              # Auto-imported utilities
+├── assets/                 # Build-processed assets (CSS, images)
+├── public/                 # Static assets (served as-is)
+├── server/                 # Server-side code
+│   ├── api/                # API routes (/api/*)
+│   ├── routes/             # Server routes
+│   ├── middleware/         # Server middleware
+│   ├── plugins/            # Nitro plugins
+│   └── utils/              # Server utilities (auto-imported)
+├── content/                # Content files (@nuxt/content)
+├── layers/                 # Local layers (auto-scanned)
+├── modules/                # Local modules
+├── nuxt.config.ts          # Nuxt configuration
+├── package.json
+└── tsconfig.json
+```
+
+## Key Directories
+
+### `app/` Directory
+
+Contains all application code. Can also be at root level (without `app/` folder).
+
+```ts
+// nuxt.config.ts - customize source directory
+export default defineNuxtConfig({
+  srcDir: 'src/', // Change from 'app/' to 'src/'
+})
+```
+
+### `app/components/`
+
+Vue components auto-imported by name:
+
+```
+components/
+├── Button.vue           → <Button />
+├── Card.vue             → <Card />
+├── base/
+│   └── Button.vue       → <BaseButton />
+├── ui/
+│   ├── Input.vue        → <UiInput />
+│   └── Modal.vue        → <UiModal />
+└── TheHeader.vue        → <TheHeader />
+```
+
+**Lazy loading**: Prefix with `Lazy` for dynamic import:
+
+```vue
+<template>
+  <LazyHeavyChart v-if="showChart" />
+</template>
+```
+
+**Client/Server only**:
+
+```
+components/
+├── Comments.client.vue  → Only rendered on client
+└── ServerData.server.vue → Only rendered on server
+```
+
+### `app/composables/`
+
+Vue composables auto-imported (top-level files only):
+
+```
+composables/
+├── useAuth.ts           → useAuth()
+├── useFoo.ts            → useFoo()
+└── nested/
+    └── utils.ts         → NOT auto-imported
+```
+
+Re-export nested composables:
+
+```ts
+// composables/index.ts
+export { useHelper } from './nested/utils'
+```
+
+### `app/pages/`
+
+File-based routing:
+
+```
+pages/
+├── index.vue            → /
+├── about.vue            → /about
+├── blog/
+│   ├── index.vue        → /blog
+│   └── [slug].vue       → /blog/:slug
+├── users/
+│   └── [id]/
+│       └── profile.vue  → /users/:id/profile
+├── [...slug].vue        → /* (catch-all)
+├── [[optional]].vue     → /:optional? (optional param)
+└── (marketing)/         → Route group (not in URL)
+    └── pricing.vue      → /pricing
+```
+
+**Pages are optional**: Without `pages/`, no vue-router is included.
+
+### `app/layouts/`
+
+Layout components wrapping pages:
+
+```
+layouts/
+├── default.vue          → Default layout
+├── admin.vue            → Admin layout
+└── blank.vue            → No layout
+```
+
+```vue
+<!-- layouts/default.vue -->
+<template>
+  <div>
+    <TheHeader />
+    <slot />
+    <TheFooter />
+  </div>
+</template>
+```
+
+Use in pages:
+
+```vue
+<script setup>
+definePageMeta({
+  layout: 'admin',
+  // layout: false // Disable layout
+})
+</script>
+```
+
+### `app/middleware/`
+
+Route middleware:
+
+```
+middleware/
+├── auth.ts              → Named middleware
+├── admin.ts             → Named middleware
+└── logger.global.ts     → Global middleware (runs on every route)
+```
+
+### `app/plugins/`
+
+Nuxt plugins (auto-registered):
+
+```
+plugins/
+├── 01.analytics.ts      → Order with number prefix
+├── 02.auth.ts
+├── vue-query.client.ts  → Client-only plugin
+└── server-init.server.ts → Server-only plugin
+```
+
+### `server/` Directory
+
+Nitro server code:
+
+```
+server/
+├── api/
+│   ├── users.ts         → GET /api/users
+│   ├── users.post.ts    → POST /api/users
+│   └── users/[id].ts    → /api/users/:id
+├── routes/
+│   └── sitemap.xml.ts   → /sitemap.xml
+├── middleware/
+│   └── auth.ts          → Runs on every request
+├── plugins/
+│   └── db.ts            → Server startup plugins
+└── utils/
+    └── db.ts            → Auto-imported server utilities
+```
+
+### `public/` Directory
+
+Static assets served at root URL:
+
+```
+public/
+├── favicon.ico          → /favicon.ico
+├── robots.txt           → /robots.txt
+└── images/
+    └── logo.png         → /images/logo.png
+```
+
+### `assets/` Directory
+
+Build-processed assets:
+
+```
+assets/
+├── css/
+│   └── main.css
+├── images/
+│   └── hero.png
+└── fonts/
+    └── custom.woff2
+```
+
+Reference in components:
+
+```vue
+<template>
+  <img src="~/assets/images/hero.png" />
+</template>
+
+<style>
+@import '~/assets/css/main.css';
+</style>
+```
+
+## Special Files
+
+| File | Purpose |
+|------|---------|
+| `app.vue` | Root component (optional with pages/) |
+| `app.config.ts` | Runtime app configuration |
+| `error.vue` | Custom error page |
+| `nuxt.config.ts` | Build-time configuration |
+| `.nuxtignore` | Ignore files from Nuxt |
+| `.env` | Environment variables |
+
+## File Naming Conventions
+
+| Pattern | Meaning |
+|---------|---------|
+| `[param]` | Dynamic route parameter |
+| `[[param]]` | Optional parameter |
+| `[...slug]` | Catch-all route |
+| `(group)` | Route group (not in URL) |
+| `.client.vue` | Client-only component |
+| `.server.vue` | Server-only component |
+| `.global.ts` | Global middleware |
+
+<!-- 
+Source references:
+- https://nuxt.com/docs/directory-structure
+- https://nuxt.com/docs/directory-structure/app
+- https://nuxt.com/docs/directory-structure/server
+-->