{"id":41736393,"url":"https://github.com/srcdev/nuxt-components","last_synced_at":"2026-05-10T00:26:51.164Z","repository":{"id":262521717,"uuid":"887489569","full_name":"srcdev/nuxt-components","owner":"srcdev","description":"Nuxt components layers","archived":false,"fork":false,"pushed_at":"2026-04-06T21:27:12.000Z","size":56048,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-06T23:21:39.263Z","etag":null,"topics":["nuxt-test-utils","nuxt4","pinia","playwright-tests","storybook","vitest"],"latest_commit_sha":null,"homepage":"https://storybook.srcdev.co.uk","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srcdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-12T20:42:53.000Z","updated_at":"2026-04-06T21:27:16.000Z","dependencies_parsed_at":"2024-11-19T20:31:52.836Z","dependency_job_id":"2467d57e-6ef3-45e2-8be4-b12f2baca683","html_url":"https://github.com/srcdev/nuxt-components","commit_stats":null,"previous_names":["srcdev/nuxt-components"],"tags_count":210,"template":false,"template_full_name":null,"purl":"pkg:github/srcdev/nuxt-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcdev%2Fnuxt-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcdev%2Fnuxt-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcdev%2Fnuxt-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcdev%2Fnuxt-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srcdev","download_url":"https://codeload.github.com/srcdev/nuxt-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcdev%2Fnuxt-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31495471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T17:22:55.647Z","status":"ssl_error","status_checked_at":"2026-04-06T17:22:54.741Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt-test-utils","nuxt4","pinia","playwright-tests","storybook","vitest"],"created_at":"2026-01-25T00:05:25.761Z","updated_at":"2026-04-28T00:02:10.189Z","avatar_url":"https://github.com/srcdev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SRCDEV Nuxt Components\n\n[![Tests](https://github.com/srcdev/nuxt-components/workflows/Tests/badge.svg)](https://github.com/srcdev/nuxt-components/actions/workflows/test.yml)\n[![npm version](https://badge.fury.io/js/srcdev-nuxt-components.svg)](https://badge.fury.io/js/srcdev-nuxt-components)\n[![License](https://img.shields.io/github/license/srcdev/nuxt-components.svg)](https://github.com/srcdev/nuxt-components/blob/main/LICENSE)\n\n## NOTE\n\nAlthought this repo is public and feel free to do what you wish with it, this has been developed for use with websites we develop.\n\n## Install Nuxt Components layer\n\n```bash\nnpm install --save srcdev-nuxt-components\n```\n\n```ts\ndefineNuxtConfig({\n  extends: \"srcdev-nuxt-components\",\n  css: [\"srcdev-nuxt-components/app/assets/styles/main.css\", \"./app/assets/styles/main.css\"],\n});\n```\n\n\u003e **Note**: The layer CSS is not automatically included when installed from `node_modules`. You must explicitly add it to the `css` array as shown above. The second entry (`./app/assets/styles/main.css`) is your app's own stylesheet for overrides — create it if it doesn't exist.\n\n## Claude Code Skills\n\nThis package ships Claude Code skills — reference docs for components and development tasks — in the `.claude/` directory.\n\nTo make them available in your project, add this script to your `package.json`:\n\n```json\n\"setup:claude\": \"cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components\"\n```\n\nThen run it after install:\n\n```bash\nnpm run setup:claude\n```\n\nSkills are copied into `.claude/skills/srcdev-nuxt-components/` so they never conflict with or overwrite skills your own project defines. Re-running the script after a package update is safe.\n\n### Automate with postinstall (recommended)\n\nTo ensure skills are always up to date and `nuxt prepare` is never forgotten, combine both into a `postinstall` script. npm runs this automatically after every `npm install`:\n\n```json\n\"scripts\": {\n  \"setup:claude\": \"cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components\",\n  \"postinstall\": \"nuxt prepare \u0026\u0026 npm run setup:claude\"\n}\n```\n\n\u003e If your app uses a standalone env flag for `nuxt prepare` (e.g. `NUXT_STANDALONE=true`), include it in the `postinstall` command. This is project-specific — check your own `nuxt.config.ts` to confirm whether it is needed.\n\n---\n\n## Scaffolding a New App\n\nA Claude Code skill is included to scaffold a new Nuxt consumer app from scratch. It generates\n`package.json`, `nuxt.config.ts`, ESLint/Prettier config, the full `app/` directory structure,\nand a `CLAUDE.md` — all pre-wired to extend this layer correctly.\n\n**Trigger it by saying to Claude Code:**\n\n\u003e \"Scaffold a new layer consumer app. Repo: `/path/to/repo`, name: `my-app`, domain: `myapp.co.uk`, fonts: `Fraunces, Manrope`.\"\n\nThe skill is available at `.claude/skills/new-app-scaffold.md` once copied into your project\nvia `npm run setup:claude`.\n\n---\n\n## Consumer App Configuration\n\nConfiguration options for apps extending this layer. All options go in the consumer's `nuxt.config.ts` under `runtimeConfig.public` and can also be set via environment variable.\n\n### Colour Scheme\n\nThe layer ships with light/dark/auto colour scheme support. This includes a synchronous `\u003chead\u003e` script (FOUC prevention) and the `useColourScheme()` composable.\n\nConsumer apps that only use a single default scheme can disable it entirely:\n\n```ts\n// nuxt.config.ts\nruntimeConfig: {\n  public: {\n    colourScheme: {\n      enabled: false, // disables head script injection and composable side effects\n    },\n  },\n},\n```\n\nOr via environment variable:\n\n```bash\nNUXT_PUBLIC_COLOUR_SCHEME_ENABLED=false\n```\n\nWhen disabled, no `data-color-scheme` attribute is set on `\u003chtml\u003e` and `useColourScheme()` is a no-op. The default is `true`.\n\n\u003e See [.claude/skills/colour-scheme-disable.md](.claude/skills/colour-scheme-disable.md) for the full guide.\n\n---\n\n## Known Dev Server Warnings\n\n### `[request error] [GET] http://localhost:3000/_nuxt/` (404)\n\nThis error appears in the terminal when running `npm run dev` and is **harmless** — it does not affect dev server operation.\n\n**Cause**: The Vue/Nuxt browser DevTools extension probes `/_nuxt/` to detect if the page is a Nuxt app. Since `/_nuxt/` is a directory (not a file), the server returns 404 and logs it.\n\n**Resolution**: It cannot be suppressed without disabling the browser extension. Since the DevTools extension is useful for inspecting Pinia stores and component state, the recommended approach is to ignore this warning.\n\n---\n\n## Development Environment (`.vscode`)\n\nThe `.vscode` directory contains Visual Studio Code configuration files to ensure a consistent development experience across the project:\n\n### Workspace Configuration\n\n- **`settings.json`** - VS Code workspace settings including:\n  - Code formatting configuration (2-space indentation, auto-formatting on save)\n  - ESLint, Prettier, and Stylelint integration\n  - File handling settings (trim whitespace, final newlines, Unix line endings)\n  - CSS variable recognition for the project's custom properties\n\n### Recommended Extensions\n\n- **`extensions.json`** - Curated list of VS Code extensions for optimal development:\n  - **Vue.js Development**: `vue.volar` - Vue 3 language support\n  - **Nuxt.js Development**: `nuxtr.nuxtr-vscode` - Enhanced Nuxt development tools\n  - **Code Quality**: `dbaeumer.vscode-eslint`, `esbenp.prettier-vscode` - Linting and formatting\n  - **CSS Development**: `willofindie.vscode-cssvar` - CSS custom property IntelliSense\n  - **Testing**: `vitest.explorer` - Vitest test runner integration\n  - **Markdown**: `davidanson.vscode-markdownlint` - Markdown linting\n  - **Productivity**: `jkjustjoshing.vscode-text-pastry`, `formulahendry.auto-rename-tag`\n\n### Code Snippets\n\nThe `.vscode` directory includes comprehensive code snippets for rapid component development:\n\n## Contact Form — Resend Setup\n\nThe contact form at `/ui/contact-section` sends enquiries via [Resend](https://resend.com).\nNo extra packages are required — the server route calls the Resend REST API directly.\n\n### 1. Create a Resend account\n\nSign up at [resend.com](https://resend.com). The free tier allows 3,000 emails/month (100/day),\nwhich is more than sufficient for a contact form.\n\n### 2. Verify a sending domain\n\nIn the Resend dashboard go to **Domains → Add Domain** and follow the DNS instructions for your\ndomain. This is required before you can send from a custom `from` address in production.\n\n\u003e **Local development shortcut:** you can skip domain verification and use Resend's shared sandbox\n\u003e address `onboarding@resend.dev` as the `from` address. Emails will only be delivered to the\n\u003e email address registered on your Resend account, so it is safe for testing.\n\n### 3. Create an API key\n\nIn the Resend dashboard go to **API Keys → Create API Key**. Copy the key — it is only shown once.\n\n### 4. Configure environment variables\n\nCopy `.env.example` to `.env` and fill in the three values:\n\n```bash\ncp .env.example .env\n```\n\n```env\nNUXT_RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxx\nNUXT_CONTACT_EMAIL_TO=you@yourdomain.com\nNUXT_CONTACT_EMAIL_FROM=Enquiries \u003chello@yourdomain.com\u003e\n```\n\n| Variable                  | Description                                                                |\n| ------------------------- | -------------------------------------------------------------------------- |\n| `NUXT_RESEND_API_KEY`     | API key from the Resend dashboard                                          |\n| `NUXT_CONTACT_EMAIL_TO`   | The inbox that receives enquiries                                          |\n| `NUXT_CONTACT_EMAIL_FROM` | The \"from\" address shown to recipients — must use a verified Resend domain |\n\nNuxt maps `NUXT_*` variables to `runtimeConfig` automatically at runtime. The values are\n**server-only** and never included in the client bundle.\n\n### 5. Vercel deployment\n\nRather than committing a `.env` file, add the variables directly in the Vercel dashboard:\n\n1. Open your project in [vercel.com](https://vercel.com)\n2. Go to **Settings → Environment Variables**\n3. Add each of the three `NUXT_*` variables, setting the environment to **Production**\n   (and **Preview** if you want the form to work on preview deployments too)\n4. Redeploy — Vercel injects the variables at build and runtime automatically\n\n\u003e `.env` is listed in `.gitignore` and should never be committed to the repository.\n\n---\n\n## Testing\n\nThis project has two test layers that run independently.\n\n---\n\n### Unit \u0026 Snapshot Tests (Vitest)\n\nRuns component logic, HTML structure, and snapshot regression tests. No browser or running server required.\n\n```bash\n# Run in watch mode (development)\nnpm run test\n\n# Run once (CI / pre-commit)\nnpm run test:run\n\n# Open the Vitest UI (browser-based test explorer)\nnpm run test:ui\n\n# Update snapshots after an intentional component change\nnpm run test:update\n```\n\n---\n\n### Visual Regression Tests (Playwright)\n\nRuns pixel-level screenshot comparisons against Storybook. Requires Storybook to be running first.\n\n```bash\n# 1. Start Storybook\nnpm run storybook:serve\n\n# 2. In a separate terminal, run visual tests\nnpm run playwright\n\n# Update visual baselines after an intentional visual change\nnpm run playwright:update\n\n# View Playwright test report\nnpx playwright show-report\n```\n\n\u003e Visual tests run across Chromium, Firefox, and WebKit. Snapshot baselines are stored per browser — expect three PNG files per component test.\n\n---\n\n### What Each Layer Catches\n\n| Change                                | Unit tests | Visual tests |\n| ------------------------------------- | ---------- | ------------ |\n| Class added / removed                 | ✅         | ✅           |\n| HTML structure changed                | ✅         | ✅           |\n| Font weight / color / spacing changed | ❌         | ✅           |\n| Prop or slot logic broken             | ✅         | ❌           |\n| Accessibility attribute missing       | ✅         | ❌           |\n\n---\n\n## Storybook\n\nStorybook is used for isolated component development and as the target for visual regression tests. It runs as a separate Vite-based dev server.\n\n### Scripts\n\n```bash\n# Start Storybook dev server (http://localhost:6006)\nnpm run storybook\n\n# Build a static Storybook (outputs to storybook-static/)\nnpm run storybook:build\n\n# Build and serve locally — used before running Playwright visual tests\nnpm run storybook:serve\n\n# Clear Storybook and Vite caches — run this if styles appear stale after changes\nnpm run storybook:cache:clean\n```\n\n\u003e After clearing the cache, restart with `npm run storybook`. The cache clear is particularly\n\u003e useful when changes inside `@layer` CSS blocks are not reflected in the running dev server.\n\n### Fonts\n\n`@nuxt/fonts` is disabled in Storybook (detected via `process.env.STORYBOOK` in `nuxt.config.ts`).\nFonts are served instead from local files in `.storybook/public/_fonts/`, declared in `.storybook/fonts.css` and imported in `.storybook/preview.ts`.\n\n| Font             | Format | Source                                       |\n| ---------------- | ------ | -------------------------------------------- |\n| Poppins          | TTF    | `.storybook/public/_fonts/poppins/`          |\n| Playfair Display | woff2  | `.storybook/public/_fonts/playfair-display/` |\n\nTo add a new font, see [.claude/skills/storybook-add-font.md](.claude/skills/storybook-add-font.md).\n\n#### Core Components\n\n- **`srcdev-nuxt3-component-boilerplate.code-snippets`** - Base component template with prop validation\n- **`srcdev-nuxt3-page-layout.code-snippets`** - Page layout scaffolding\n- **`srcdev-nuxt3-pinia-store-setup.code-snippets`** - Pinia store configuration\n\n#### UI Components\n\n- **`srcdev-nuxt3-accordian-component.code-snippets`** - Accordion component templates\n- **`srcdev-nuxt3-carousel-basic-component.code-snippets`** - Basic carousel implementation\n- **`srcdev-nuxt3-carousel-flip-component.code-snippets`** - Flip carousel variant\n- **`srcdev-nuxt3-container-glow-component.code-snippets`** - Container with glow effects\n- **`srcdev-nuxt3-dialog-component.code-snippets`** - Modal dialog templates\n- **`srcdev-nuxt3-display-banner-component.code-snippets`** - Display banner component\n- **`srcdev-nuxt3-display-details-component.code-snippets`** - Collapsible details component\n- **`srcdev-nuxt3-display-prompt-component.code-snippets`** - Alert/notification prompts\n- **`srcdev-nuxt3-expanding-panel-component.code-snippets`** - Expandable panel component\n- **`srcdev-nuxt3-layout-row.code-snippets`** - Layout row component\n- **`srcdev-nuxt3-responsive-header-component.code-snippets`** - Responsive navigation header\n- **`srcdev-nuxt3-tabs-component.code-snippets`** - Tab component system\n\nEach snippet provides both HTML template usage examples and TypeScript setup code, enabling developers to quickly implement components with proper typing and configuration.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrcdev%2Fnuxt-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrcdev%2Fnuxt-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrcdev%2Fnuxt-components/lists"}