@cooperco/nuxt-layer-base 1.0.5 → 1.1.1

package/README.md

@@ -2,81 +2,56 @@
 
 A foundational layer that provides essential configuration and tooling for Nuxt 4 projects.
 
-## Features
+Compatibility Date: 2025-07-15
 
-- TypeScript integration with strict mode enabled
-- ESLint configuration with stylistic rules for Vue templates
-- Test utilities integration
-- Internationalization (i18n) via `@nuxtjs/i18n`
-- Nuxt DevTools enabled
-- CI/CD workflows for code quality checks
-
-## Development
-
-```bash
-# Install dependencies
-npm install
+—
 
-# Start development server
-npm run dev
-
-# Run ESLint
-npm run lint
+## About Nuxt Layers
 
-# Fix linting issues automatically
-npm run lint:fix
+Nuxt Layers are a way to share configuration, modules, and app/server files across multiple Nuxt projects. An app “extends” a layer, and Nuxt will merge the layer’s modules, runtime configuration, and directory contents (like `app/`, `server/`, and `plugins/`) with the app’s own files. This lets teams centralize common tooling and conventions while each app remains free to add its own code.
 
-# Run TypeScript type checking
-npm run typecheck
-```
+Learn more in the official Nuxt Layers documentation: https://nuxt.com/docs/guide/going-further/layers
 
-## Configuration Details
+## For app developers: Using this layer
 
-### Key Features
+### What this layer provides
 
-- **Compatibility Date:** 2025-07-15
-- **Strict TypeScript:** Enforces type safety throughout your projects
-- **ESLint Integration:** Pre-configured with stylistic rules for Vue templates
-  - Custom ESLint rules for code style consistency
-  - Vue template formatting rules
-- **Testing Utilities:** Built-in test utils for comprehensive testing
-
-### Configuration Details
+- TypeScript with strict mode enabled
+- ESLint via `@nuxt/eslint` with stylistic Vue template rules
+- Internationalization (i18n) via `@nuxtjs/i18n`
+- Nuxt DevTools enabled in development
+- Optional error and event logging to Loggly (client and server), disabled by default
 
-The base layer includes:
+### Install in your app
 
-- Nuxt ESLint module (`@nuxt/eslint`)
-- Nuxt Test Utils module (`@nuxt/test-utils`) 
-- Nuxt i18n module (`@nuxtjs/i18n`)
-- Nuxt DevTools enabled
-- TypeScript configuration with strict mode
-- Custom ESLint configuration with rules for:
-  - JavaScript stylistic preferences
-  - TypeScript unused variables handling
-  - Vue template formatting
+1) Add the layer to your project as a dev dependency
 
-## Internationalization (i18n)
+```bash
+# npm
+npm i -D @cooperco/nuxt-layer-base
 
-This layer integrates the Nuxt i18n module (`@nuxtjs/i18n`). You can override or extend its configuration in your application.
+# pnpm
+pnpm add -D @cooperco/nuxt-layer-base
 
-- Docs: https://i18n.nuxtjs.org
+# yarn
+yarn add -D @cooperco/nuxt-layer-base
+```
 
-Override example in a consuming app:
+2) Extend the layer in your app’s Nuxt config
 
 ```ts
 // nuxt.config.ts (in your app)
 export default defineNuxtConfig({
-  extends: ['@cooperco/nuxt-layer-base'],
-  i18n: {
-    locales: [
-      { code: 'en', language: 'en-US', name: 'English' },
-      { code: 'fr', language: 'fr-FR', name: 'Français' }
-    ],
-    defaultLocale: 'en'
-  }
+  extends: ['@cooperco/nuxt-layer-base']
 })
 ```
 
+TypeScript strict mode and DevTools are active immediately. For ESLint, add a config in your app (see "ESLint in consumer apps").
+
+### Internationalization (i18n)
+
+This layer integrates the Nuxt i18n module. Use it directly in your components; preferred usage is an SFC `<i18n>` block. You can also call `useI18n()` in scripts.
+
 Basic usage in a component:
 
 ```vue
@@ -86,202 +61,397 @@ const { t, locale } = useI18n()
 
 <template>
   <p>{{ t('hello') }}</p>
+  <small>Current locale: {{ locale }}</small>
+  <!-- Provide your own translation files in your app (e.g., locales/en.json) -->
 </template>
 ```
 
-Note: Provide your own translation files (for example, `locales/en.json`) in your application.
+Preferred: single‑file component local messages using an <i18n> block
 
-## Usage
+```vue
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
 
-To use this layer in your Nuxt project:
+<template>
+  <h1>{{ t('welcome') }}</h1>
+  <p>{{ t('cta') }}</p>
+</template>
 
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  extends: [
-    '@cooperco/nuxt-layer-base'
-  ]
-})
+<i18n lang="json5">
+{
+  en: {
+    welcome: 'Welcome',
+    cta: 'Click to continue'
+  },
+  fr: {
+    welcome: 'Bienvenue',
+    cta: 'Cliquez pour continuer'
+  }
+}
+</i18n>
 ```
 
-## Nuxt 4 directory structure
-This layer follows Nuxt 4's app directory structure:
-- app/plugins/... for plugins (e.g., app/plugins/loggly.client.ts)
-- app/composables/... for composables (e.g., app/composables/useLoggly.ts)
+Both global files (e.g., `locales/en.json`) and per‑component `<i18n>` blocks are supported.
 
-If you previously looked under plugins/ or composables/ at the layer root, note they have been relocated under app/ for Nuxt 4.
+### Logging (optional, Loggly‑backed)
 
-## Error logging (Loggly)
+When enabled via environment variables, the base layer will:
+- Capture server-side errors (Nitro request lifecycle)
+- Capture client-side errors (Nuxt app errors, Vue component errors, global `window` errors, unhandled rejections)
+- Provide a `useLogger()` composable for custom logs (and a deprecated `useLoggly()` wrapper)
+- Proxy all logs through the canonical route `/api/log`, where payloads are normalized and sensitive fields are scrubbed before forwarding to Loggly
 
-This base layer includes optional, secure error logging via Loggly using a server proxy. It is off by default and can be enabled per consuming app using environment variables.
+Enable in your app with environment variables:
 
-What you get when enabled:
-- Automatic server-side error capture (Nitro request errors)
-- Automatic client-side error capture (Nuxt/Vue/global browser errors)
-- Composable for custom logs from your features (useLoggly)
-- Centralized PII scrubbing on the server proxy before forwarding to Loggly
-
-### 1) Enable in your app (env vars)
-Set the following environment variables in your consuming app (do not expose the token on the client):
-
-- LOGGLY_ENABLED=true
-- LOGGLY_TOKEN=your-loggly-customer-token
-- LOGGLY_TAGS=nuxt,base,app-name,env  (comma-separated; optional)
-- LOG_LEVEL=error  (optional; error|warn|info|debug)
-- LOGGLY_ENDPOINT=https://logs-01.loggly.com/inputs  (optional override)
+- `LOGGLY_ENABLED=true`
+- `LOGGLY_TOKEN=<your Loggly customer token>` (server-only)
+- `LOGGLY_TAGS=app-name,env` (optional, comma-separated)
+- `LOG_LEVEL=error` (optional; exposed to client for your own use)
+- `LOGGLY_ENDPOINT=https://logs-01.loggly.com/inputs` (optional override, server-only)
 
 Notes
-- LOGGLY_TOKEN is server-only and never shipped to the client. The client sends logs to the server proxy at /api/loggly.
-- If LOGGLY_ENABLED is not true or the token is missing, logging is skipped.
-
-### 2) Using the composable in your app
-The base layer exposes a composable you can call anywhere in your app.
+- The token is never exposed to the client. Browsers only post to your app’s `/api/log` endpoint (with `/api/loggly` kept as a deprecated alias).
+- If logging is disabled or a token is not provided, the logging code is effectively a no-op and the API returns `{ ok: false, skipped: true }`.
+- `LOG_LEVEL` is exposed via runtime config but the base layer does not filter logs by level; you may use it in your own app logic.
+ - Back‑compat alias: `/api/loggly` remains available but is deprecated. Prefer `/api/log`.
+
+Tags behavior
+- Automatic, source‑specific tags are appended for captured errors:
+  - Nuxt app‑level errors: `client`, `nuxt`
+  - Vue component errors: `client`, `vue`
+  - Global window `error` events: `client`, `window`
+  - Unhandled rejections: `client`, `promise`
+  - Server‑side errors: `server`
+- Your `LOGGLY_TAGS` (e.g., `app-name,prod`) and per‑call tags from `useLogger()` are merged with the automatic tags; duplicates are removed and the list is capped at 10 tags.
+
+Composable usage:
 
-Example:
 ```ts
 // inside a component or any composable
-const log = useLoggly()
+const log = useLogger()
 await log.error('Checkout failed', { orderId, step: 'place-order' }, ['checkout'])
+await log.warn('Slow response', { endpoint: '/api/orders', ms: 850 })
 await log.info('User clicked CTA', { campaign: 'summer' }, ['marketing'])
+await log.debug('State snapshot', { state })
 ```
 
-API:
-- error(message, meta?, tags?)
-- warn(message, meta?, tags?)
-- info(message, meta?, tags?)
-- debug(message, meta?, tags?)
-
-Tags are merged with your global LOGGLY_TAGS (duplicates removed, limited to 10).
-
-### 3) Auto-captured errors
-When enabled, the base layer automatically forwards:
+Automatically captured errors (when enabled):
 - Server: request-time exceptions via a Nitro plugin
-- Client: Nuxt app errors, Vue component errors, window error events, and unhandled promise rejections
+- Client: Nuxt app errors, Vue component errors, `window` error events, unhandled promise rejections
 
-These are forwarded to /api/loggly, which safely shapes the payload before sending to Loggly.
+Security and privacy:
+- The server proxy masks common sensitive keys in `meta` (e.g., `password`, `token`, `authorization`, `ssn`, etc.)
+- Logging is fire-and-forget; failures to log are swallowed to avoid breaking UX
 
-### 4) Security and privacy
-- The server proxy masks common sensitive keys (password, token, authorization, etc.) in meta payloads.
-- Prefer adding any app-specific sensitive keys to your meta scrubbing in the proxy if needed.
-- Logging is fire-and-forget; failures to log do not block requests or UI.
-
-### 5) Verifying locally
-1) In your consuming app, set env vars (e.g. in .env.local):
+Verify locally:
+1) Add env vars in your app (e.g., `.env.local`):
 ```
 LOGGLY_ENABLED=true
 LOGGLY_TOKEN=...your token...
-LOGGLY_TAGS=nuxt,base,local,app-name
-LOG_LEVEL=error
+LOGGLY_TAGS=app-name,local
+```
+2) Start your app and trigger a test error.
+3) Check the network tab for `POST /api/log` and then confirm the entry in Loggly.
+
+Troubleshooting:
+- No logs? Ensure `LOGGLY_ENABLED=true` and `LOGGLY_TOKEN` is present in the server environment.
+- Browser CORS or network errors? The browser never talks to Loggly directly; it only posts to `/api/log`.
+- High volume? Consider adding sampling or batching at the proxy later if needed.
+
+### ESLint in consumer apps
+
+This layer integrates ESLint via the `@nuxt/eslint` module. When you extend this layer, ESLint is available to your app; you only need to add a config file and scripts in your project.
+
+1) Create `eslint.config.mjs` in your app root (copy from this layer and adjust only if necessary)
+
+```js
+// eslint.config.mjs (in your app)
+// Nuxt generates a flat config at ./.nuxt/eslint.config.mjs
+// We enable stylistic rules and add a few custom rules matching the base layer.
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+  rules: {
+    /* Stylistic */
+    '@stylistic/comma-dangle': [
+      'error',
+      'only-multiline'
+    ],
+    '@stylistic/no-tabs': [
+      'error',
+      { allowIndentationTabs: true }
+    ],
+
+    /* TS */
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { caughtErrorsIgnorePattern: '^_' }
+    ],
+
+    /* Vue */
+    'vue/html-closing-bracket-newline': [
+      'error',
+      { multiline: 'never', selfClosingTag: { multiline: 'never' } }
+    ],
+    'vue/html-closing-bracket-spacing': [
+      'error',
+      { selfClosingTag: 'never' }
+    ],
+    'vue/html-indent': [
+      'error', 'tab',
+      { baseIndent: 0 }
+    ],
+    'vue/multi-word-component-names': ['error', {
+      ignores: []
+    }],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'kebab-case',
+      { registeredComponentsOnly: false, ignores: [] }
+    ],
+    'vue/component-options-name-casing': ['error', 'kebab-case'],
+    'vue/component-definition-name-casing': ['error', 'kebab-case']
+  }
+})
+```
+
+2) Add scripts and run ESLint
+
+```json
+{
+  "scripts": {
+    "lint": "nuxt prepare && eslint .",
+    "lint:fix": "nuxt prepare && eslint . --fix"
+  }
+}
+```
+
+Notes
+- The base layer enables stylistic mode via Nuxt (`eslint.config.stylistic: true`).
+- Do not use Prettier alongside stylistic rules; remove Prettier configs/plugins from your app to avoid conflicts.
+- Tabs are allowed for indentation (including in Vue templates). The `no-tabs` rule is enabled but permits indentation tabs.
+
+What this ESLint config enforces (in plain English)
+
+- Base: It starts from Nuxt’s generated, project‑aware flat config (via `@nuxt/eslint`), then turns on stylistic mode for consistent formatting in JS/TS/Vue files.
+- This layer adds a few focused rules to keep things consistent and practical:
+  - `@stylistic/comma-dangle: 'only-multiline'` — Allow trailing commas only when the list spans multiple lines; disallow them on single‑line lists.
+    - Good (multiline, trailing comma ok):
+      ```js
+      const user = {
+      	id: 1,
+      	name: 'Ada',
+      }
+      ```
+    - Good (single‑line, no trailing comma): `const arr = [1, 2, 3]`
+  - `@stylistic/no-tabs` with `{ allowIndentationTabs: true }` — Tabs are allowed for indentation but tabs elsewhere are flagged.
+  - `@typescript-eslint/no-unused-vars` with `{ caughtErrorsIgnorePattern: '^_' }` — Flag unused variables, but allow a try/catch parameter that starts with `_` when you don’t use it.
+    - Good (explicitly ignored):
+      ```ts
+      try {
+      	risky()
+      }
+      catch (_err) {
+      	// intentionally ignored
+      }
+      ```
+  - `vue/html-closing-bracket-newline: { multiline: 'never', selfClosingTag: { multiline: 'never' } }` — Don’t put a newline before a closing bracket, even for multi‑line attribute lists.
+    - Bad:
+      ```vue
+      <my-comp
+      	a="1"
+      	b="2"
+      />
+      ```
+    - Good:
+      ```vue
+      <my-comp
+      	a="1"
+      	b="2" />
+      ```
+  - `vue/html-closing-bracket-spacing: { selfClosingTag: 'never' }` — No space before a self‑closing `/>`.
+    - Bad: `<my-comp />`
+    - Good: `<my-comp/>`
+  - `vue/html-indent: ['tab', { baseIndent: 0 }]` — Use tabs for indentation in Vue templates.
+    - Example:
+      ```vue
+      <template>
+      	<div>
+      		<span>Text</span>
+      	</div>
+      </template>
+      ```
+  - `vue/multi-word-component-names` — Enforce multi‑word component names (no single generic names like `Header` conflicts). Configure ignores if needed.
+  - `vue/component-name-in-template-casing: 'kebab-case'` — In templates, component tags must be kebab‑case (e.g., `<my-widget/>`, not `<MyWidget/>`).
+  - `vue/component-options-name-casing: 'kebab-case'` — In SFC component options, the `name` should be kebab‑case.
+  - `vue/component-definition-name-casing: 'kebab-case'` — For component definitions in script, enforce kebab‑case names.
+
+### TypeScript in consumer apps
+
+Strict mode is enabled by default. No configuration is required in your app.
+
+Optional type checking script (install `vue-tsc` in your app):
+
+```bash
+npm i -D vue-tsc
+```
+
+```json
+{
+  "scripts": {
+    "typecheck": "nuxt prepare && vue-tsc -b --noEmit"
+  }
+}
+```
+
+### GitHub Actions in your app (linting and type checks)
+
+To run the same checks in your app’s GitHub repository:
+
+1) Copy workflow files into your app’s repo
+- Create `.github/workflows/lint.yml` with a job that checks out your code, sets up Node, installs dependencies, and runs `npm run lint`.
+- (Optional) Create `.github/workflows/typecheck.yml` to run `npm run typecheck` if you added the script.
+
+Minimal examples you can adapt:
+
+`.github/workflows/lint.yml`
+```yaml
+name: Lint
+on:
+  pull_request:
+    branches: ['main']
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run lint
+```
+
+`.github/workflows/typecheck.yml`
+```yaml
+name: Typecheck
+on:
+  pull_request:
+    branches: ['main']
+jobs:
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run typecheck
 ```
-2) Start your app and induce an error (e.g., throw new Error('Test') in onMounted of a test component).
-3) Watch your network tab for POST /api/loggly (200 OK). Then check Loggly for the entry with your tags.
 
-### 6) Troubleshooting
-- No logs? Ensure LOGGLY_ENABLED=true and LOGGLY_TOKEN is set in the server environment.
-- CORS or network errors from the browser? The client never talks to Loggly directly; it only posts to /api/loggly.
-- Too much volume? Consider adding sampling or batching later; the proxy makes this easy to change centrally.
+2) Configure GitHub as needed
+- Enable Actions in your repository settings (if disabled).
+- If your app installs private packages, set appropriate repository secrets (e.g., `NPM_TOKEN`, organization PATs) and reference them in the workflow. For public packages only, no extra secrets are required.
 
+3) Open a pull request to see the checks run.
 
-## Playground: Test Loggly in the base layer
+—
 
-A tiny playground app is included so you can run the base layer by itself and verify Loggly end‑to‑end before integrating into another app.
+## For maintainers: Working on this layer
+
+### Repository layout and Nuxt 4 directories
+
+- Layer root: `layers/base`
+- Nuxt 4 app directories are used inside the layer:
+  - `app/plugins/...` (e.g., `app/plugins/loggly.client.ts`)
+  - `app/composables/...` (e.g., `app/composables/useLogger.ts`; deprecated wrapper: `app/composables/useLoggly.ts`)
+
+### Development scripts
+
+```bash
+# From layers/base
+npm install
+npm run dev        # start a dev server for the layer (via Nuxt)
+npm run lint       # ESLint (with nuxt prepare)
+npm run lint:fix   # ESLint --fix
+npm run typecheck  # vue-tsc
+```
 
-Location: playground
+### Linting and TypeScript
 
-How it works:
-- The playground extends the base layer (extends: ['../layers/base']).
-- It includes a simple page to send logs via useLoggly and buttons to trigger client/server errors.
-- The server exposes GET /api/boom to intentionally throw and test server‑side logging.
+- TypeScript strict mode is enforced via `nuxt.config.ts`
+- ESLint is provided by `@nuxt/eslint` with stylistic rules enabled and custom rules in `eslint.config.mjs`
 
-Run it:
-1) From the repo root:
-   - cd playground && npm run dev
+### Logging implementation (overview)
 
-2) Provide environment variables for Loggly in the playground (optional but required to actually send to Loggly):
-   Copy playground/.env.example to playground/.env and fill in your values.
+- Client plugin: `app/plugins/loggly.client.ts` hooks into Nuxt/Vue error streams and window events and posts to `/api/log`
+- Composable: `app/composables/useLogger.ts` exposes `error|warn|info|debug` helpers posting to `/api/log` (deprecated wrapper `useLoggly.ts` delegates to `useLogger()`)
+- Server plugin: `server/plugins/loggly.ts` hooks Nitro `error` events and posts to `/api/log`
+- API endpoint (canonical): `server/api/log.post.ts` scrubs/normalizes payloads and forwards to Loggly using `LOGGLY_TOKEN`
+- API endpoint (alias, deprecated): `server/api/loggly.post.ts` re-exports the canonical handler so `/api/loggly` continues to work
+- Runtime config (see `nuxt.config.ts`):
+  - Server-only: `logglyToken`, `logglyEndpoint`
+  - Public: `logglyEnabled`, `logglyTags`, `logLevel`
+  - Supports both `LOGGLY_*` and `NUXT_PUBLIC_LOG_*` env vars where appropriate
 
-   LOGGLY_ENABLED=true
-   LOGGLY_TOKEN=your-loggly-customer-token
-   LOGGLY_TAGS=nuxt,base,playground,local
-   LOG_LEVEL=debug
-   # Optional override
-   # LOGGLY_ENDPOINT=https://logs-01.loggly.com/inputs
+### Environment files
 
-3) Open http://localhost:3000
-   - Click the Send error/warn/info/debug buttons to send custom logs.
-   - Click Throw client error to exercise the client plugin.
-   - Click Call /api/boom to exercise the server plugin.
+- `layers/base/.env` is only for developing the base layer directly (not used by consuming apps)
+- For the repo playground, use `playground/.env`
+- For downstream apps, use `.env` or `.env.local` in the app’s root
 
-Notes:
-- If LOGGLY_ENABLED is not true or LOGGLY_TOKEN is missing, the server proxy will skip sending and respond with { ok: false, skipped: true }.
-- The token is server‑only; it is never exposed to the client. The browser only talks to /api/loggly on your dev server.
+### Playground
 
+There is a simple playground app at `playground` that extends the base layer and exposes UI to trigger logging. This is useful for end‑to‑end verification during development.
 
----
+Run from repo root:
+```bash
+cd playground
+npm run dev
+```
 
-## Publishing to npm (tag-based)
+### Publishing to npm (tag-based)
 
-This layer is published using GitHub Actions when you push a tag that matches the base-vX.Y.Z pattern.
+This package is published via GitHub Actions when you push a tag that matches `base-vX.Y.Z`.
 
 High-level flow:
-- Bump the version in layers/base/package.json (SemVer).
-- Commit and push your changes to main (or ensure the commit is on main).
-- Create and push a tag named base-vX.Y.Z (matching the package.json version).
-- The Publish Base Layer workflow installs deps, checks if that exact version already exists on npm, and if not, publishes privately with --access restricted.
+- Bump the version in `layers/base/package.json` (SemVer)
+- Commit and push to `main`
+- Create and push a tag `base-vX.Y.Z` matching the version
+- CI checks whether the version exists on npm and publishes if not
 
 Important notes:
-- Do NOT rely on npm version creating a tag for you (it will create vX.Y.Z). We use a custom tag prefix base-v.
-- First-time private publish is already configured via publishConfig.access: "restricted".
-- The workflow will skip if the version already exists (you'll see "Skipping; version already exists.").
-
-### Step-by-step
-
-1) Bump the version in layers/base/package.json
-- Option A (recommended): use npm version without creating a tag
-  - Bash:
-    ```bash
-    cd layers/base
-    npm version patch --no-git-tag-version  # or minor | major
-    ```
-  - PowerShell:
-    ```powershell
-    Set-Location layers/base
-    npm version patch --no-git-tag-version  # or minor | major
-    ```
-- Option B: manually edit the version field in layers/base/package.json (SemVer: MAJOR.MINOR.PATCH)
-
-2) Commit and push the change (from repo root or layers/base)
+- Do NOT rely on `npm version` to create the tag (it creates `vX.Y.Z`). Create `base-vX.Y.Z` yourself.
+- `publishConfig.access` is set to `public`; publishes are public to npmjs.
+- The workflow skips if the exact version already exists.
+
+Step-by-step
+1) Bump version without creating a tag:
+```bash
+cd layers/base
+npm version patch --no-git-tag-version  # or minor | major
+```
+2) Commit and push:
 ```bash
 git add layers/base/package.json
 git commit -m "chore(base): bump version"
 git push origin main
 ```
+3) Tag and push:
+```bash
+cd layers/base
+VERSION=$(node -p "require('./package.json').version")
+cd ../..
+git tag "base-v$VERSION"
+git push origin "base-v$VERSION"
+```
+4) CI will publish
+- Workflow: `.github/workflows/publish-base.yml`
+- Auth: `NPM_TOKEN` GitHub secret
 
-3) Create and push the tag using the new version
-- Get the new version value:
-  - Bash:
-    ```bash
-    cd layers/base
-    VERSION=$(node -p "require('./package.json').version")
-    cd ../..
-    git tag "base-v$VERSION"
-    git push origin "base-v$VERSION"
-    ```
-  - PowerShell:
-    ```powershell
-    Set-Location layers/base
-    $version = node -p "require('./package.json').version"
-    Set-Location ../..
-    git tag "base-v$version"
-    git push origin "base-v$version"
-    ```
-
-4) GitHub Actions will publish
-- Workflow: .github/workflows/publish-base.yml
-- Auth: uses NPM_TOKEN (Classic Automation token) configured as a GitHub secret
-- Behavior: installs, checks npm view @cooperco/nuxt-layer-base@<version>, publishes if not found
-
-### Troubleshooting
-- Version already exists: bump the version again (patch/minor/major) and push a new tag.
-- Auth errors (401/403): ensure NPM_TOKEN is set in repo secrets and org access is correct.
-- Registry mismatch: this repo’s .npmrc pins @cooperco to https://registry.npmjs.org/; keep that file intact.
+Troubleshooting
+- Version exists: bump again and retag
+- 401/403: ensure `NPM_TOKEN` is configured and has access

package/app/composables/useLogger.ts

@@ -0,0 +1,28 @@
+export type LogLevel = 'error' | 'warn' | 'info' | 'debug'
+
+export const useLogger = () => {
+  const { public: pub } = useRuntimeConfig()
+  const enabled = !!pub?.logglyEnabled
+  const baseTags = (pub?.logglyTags || []) as string[]
+
+  const send = (
+    level: LogLevel,
+    message: string,
+    meta?: Record<string, unknown>,
+    tags: string[] = []
+  ) => {
+    if (!enabled) return
+    const mergedTags = [...new Set([...baseTags, ...tags])].slice(0, 10)
+    return $fetch('/api/log', {
+      method: 'POST',
+      body: { level, message, meta, tags: mergedTags }
+    }).catch(() => {})
+  }
+
+  return {
+    error: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('error', m, meta, tags),
+    warn: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('warn', m, meta, tags),
+    info: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('info', m, meta, tags),
+    debug: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('debug', m, meta, tags)
+  }
+}

package/app/composables/useLoggly.ts

@@ -1,28 +1,6 @@
-export type LogLevel = 'error' | 'warn' | 'info' | 'debug'
+import { useLogger } from './useLogger'
 
-export const useLoggly = () => {
-  const { public: pub } = useRuntimeConfig()
-  const enabled = !!pub?.logglyEnabled
-  const baseTags = (pub?.logglyTags || []) as string[]
-
-  const send = (
-    level: LogLevel,
-    message: string,
-    meta?: Record<string, unknown>,
-    tags: string[] = []
-  ) => {
-    if (!enabled) return
-    const mergedTags = [...new Set([...baseTags, ...tags])].slice(0, 10)
-    return $fetch('/api/loggly', {
-      method: 'POST',
-      body: { level, message, meta, tags: mergedTags }
-    }).catch(() => {})
-  }
-
-  return {
-    error: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('error', m, meta, tags),
-    warn: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('warn', m, meta, tags),
-    info: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('info', m, meta, tags),
-    debug: (m: string, meta?: Record<string, unknown>, tags?: string[]) => send('debug', m, meta, tags)
-  }
-}
+/**
+ * @deprecated Use `useLogger()` instead. This wrapper will be removed in a future major release.
+ */
+export const useLoggly = () => useLogger()

package/app/plugins/loggly.client.ts

@@ -2,12 +2,49 @@ export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
   if (!config.public?.logglyEnabled) return
 
+  // Client-side de-duplication of errors that may surface through multiple channels
+  // (e.g., Vue errorHandler and window 'error'). We use a short-lived signature cache.
+  const recentSignatures = new Set<string>()
+  const remember = (sig: string) => {
+    recentSignatures.add(sig)
+    // Keep signatures briefly to collapse duplicate reports in the same tick/burst
+    setTimeout(() => {
+      recentSignatures.delete(sig)
+    }, 1000)
+  }
+
   const post = (payload: Record<string, unknown>) =>
-    $fetch('/api/loggly', { method: 'POST', body: payload }).catch(() => { /* swallow */ })
+    $fetch('/api/log', { method: 'POST', body: payload }).catch(() => { /* swallow */ })
+
+  const hasMessage = (val: unknown): val is { message?: unknown } => {
+    return !!val && typeof val === 'object' && 'message' in (val as Record<string, unknown>)
+  }
+
+  const toSig = (err: unknown, fallbackMsg?: string): string | undefined => {
+    if (err instanceof Error) {
+      // name+message is sufficient across multiple client hooks; stacks can differ
+      return `${err.name}:${err.message}`
+    }
+    if (typeof err === 'string') return `str:${err}`
+    if (hasMessage(err)) {
+      return `obj:${String(err.message)}`
+    }
+    if (fallbackMsg) return `msg:${fallbackMsg}`
+    return undefined
+  }
+
+  const postOnce = (err: unknown, payload: Record<string, unknown>) => {
+    const sig = toSig(err, String(payload?.message ?? ''))
+    if (sig) {
+      if (recentSignatures.has(sig)) return
+      remember(sig)
+    }
+    return post(payload)
+  }
 
   // Nuxt app-level errors
   nuxtApp.hook('app:error', (err) => {
-    post({
+    postOnce(err, {
       level: 'error',
       message: extractMessage(err) || 'App error',
       error: toErrorShape(err),
@@ -18,7 +55,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   // Vue component-level errors
   const originalHandler = nuxtApp.vueApp.config.errorHandler
   nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
-    post({
+    postOnce(err, {
       level: 'error',
       message: extractMessage(err) || 'Vue error',
       error: toErrorShape(err),
@@ -30,11 +67,11 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   if (import.meta.client) {
     window.addEventListener('error', (event: ErrorEvent) => {
-      post({ level: 'error', message: event.message, error: toErrorShape(event.error), tags: ['client', 'window'] })
+      postOnce(event.error, { level: 'error', message: event.message, error: toErrorShape(event.error), tags: ['client', 'window'] })
     })
     window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
       const reason = event.reason
-      post({ level: 'error', message: extractMessage(reason) || 'Unhandled rejection', error: toErrorShape(reason), tags: ['client', 'promise'] })
+      postOnce(reason, { level: 'error', message: extractMessage(reason) || 'Unhandled rejection', error: toErrorShape(reason), tags: ['client', 'promise'] })
     })
   }
 })

package/eslint.config.mjs

@@ -6,7 +6,12 @@ export default withNuxt({
     /* Stylistic */
     '@stylistic/comma-dangle': [
       'error',
-      'never'
+      'only-multiline'
+    ],
+
+    '@stylistic/no-tabs': [
+      'error',
+      { allowIndentationTabs: true }
     ],
 
     /* TS */
@@ -25,9 +30,19 @@ export default withNuxt({
       { selfClosingTag: 'never' }
     ],
     'vue/html-indent': [
-      'error', 2,
+      'error', 'tab',
       { baseIndent: 0 }
-    ]
+    ],
+    'vue/multi-word-component-names': ['error', {
+      ignores: []
+    }],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'kebab-case',
+      { registeredComponentsOnly: false, ignores: [] }
+    ],
+    'vue/component-options-name-casing': ['error', 'kebab-case'],
+    'vue/component-definition-name-casing': ['error', 'kebab-case']
   }
 })
 

package/nuxt.config.ts

@@ -30,6 +30,10 @@ export default defineNuxtConfig({
     config: {
       stylistic: true
     }
+  },
+
+  i18n: {
+    defaultLocale: 'en'
   }
 
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cooperco/nuxt-layer-base",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
@@ -22,13 +22,13 @@
   "author": "cooperco",
   "license": "MIT",
   "dependencies": {
-    "@nuxt/eslint": "^1.9.0",
-    "@nuxtjs/i18n": "^10.1.0",
-    "nuxt": "4.1.2"
+    "@nuxtjs/i18n": "^10.2.1",
+    "nuxt": "^4.2.2"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "^3.19.2",
-    "eslint": "^9.37.0",
-    "vue-tsc": "^3.1.1"
+    "@nuxt/eslint": "^1.10.0",
+    "@nuxt/test-utils": "^3.20.1",
+    "eslint": "^9.39.2",
+    "vue-tsc": "^3.1.4"
   }
 }

package/server/api/log.post.ts

@@ -0,0 +1,58 @@
+import { defineEventHandler, readBody } from 'h3'
+
+type LogglyBody = {
+  level?: string
+  message?: string
+  error?: unknown
+  tags?: string[]
+  meta?: Record<string, unknown>
+}
+
+const sanitizeMeta = (input: unknown) => {
+  if (!input || typeof input !== 'object') return undefined
+  const blocked = ['password', 'token', 'authorization', 'auth', 'ssn', 'creditcard', 'credit_card']
+  const out: Record<string, unknown> = {}
+  for (const [k, v] of Object.entries(input as Record<string, unknown>)) {
+    out[k] = blocked.includes(k.toLowerCase()) ? '[REDACTED]' : v
+  }
+  return out
+}
+
+const serializeError = (err: unknown) => {
+  if (!err || typeof err !== 'object') return undefined
+  const e = err as { name?: string, message?: unknown, stack?: unknown }
+  return {
+    name: e.name || 'Error',
+    message: String(e.message ?? 'Error'),
+    stack: typeof e.stack === 'string' ? e.stack.split('\n').slice(0, 20) : undefined
+  }
+}
+
+export default defineEventHandler(async (event) => {
+  const { logglyToken, logglyEndpoint, public: pub } = useRuntimeConfig()
+  if (!pub?.logglyEnabled || !logglyToken) {
+    return { ok: false, skipped: true }
+  }
+
+  const body = await readBody<LogglyBody>(event)
+
+  const scrubbed = {
+    level: body?.level ?? 'error',
+    message: body?.message?.toString().slice(0, 5000),
+    tags: [...new Set([...(pub.logglyTags || []), ...(body?.tags || [])])].slice(0, 10),
+    meta: sanitizeMeta(body?.meta),
+    error: body?.error ? serializeError(body.error) : undefined,
+    ts: new Date().toISOString()
+  }
+
+  const url = `${logglyEndpoint}/${encodeURIComponent(logglyToken)}/tag/${encodeURIComponent(scrubbed.tags.join(','))}`
+
+  try {
+    await $fetch(url, { method: 'POST', body: scrubbed })
+    return { ok: true }
+  }
+  catch {
+    // do not throw here to avoid cascading failures
+    return { ok: false }
+  }
+})

package/server/api/loggly.post.ts

@@ -1,58 +1 @@
-import { defineEventHandler, readBody } from 'h3'
-
-type LogglyBody = {
-  level?: string
-  message?: string
-  error?: unknown
-  tags?: string[]
-  meta?: Record<string, unknown>
-}
-
-const sanitizeMeta = (input: unknown) => {
-  if (!input || typeof input !== 'object') return undefined
-  const blocked = ['password', 'token', 'authorization', 'auth', 'ssn', 'creditcard', 'credit_card']
-  const out: Record<string, unknown> = {}
-  for (const [k, v] of Object.entries(input as Record<string, unknown>)) {
-    out[k] = blocked.includes(k.toLowerCase()) ? '[REDACTED]' : v
-  }
-  return out
-}
-
-const serializeError = (err: unknown) => {
-  if (!err || typeof err !== 'object') return undefined
-  const e = err as { name?: string, message?: unknown, stack?: unknown }
-  return {
-    name: e.name || 'Error',
-    message: String(e.message ?? 'Error'),
-    stack: typeof e.stack === 'string' ? e.stack.split('\n').slice(0, 20) : undefined
-  }
-}
-
-export default defineEventHandler(async (event) => {
-  const { logglyToken, logglyEndpoint, public: pub } = useRuntimeConfig()
-  if (!pub?.logglyEnabled || !logglyToken) {
-    return { ok: false, skipped: true }
-  }
-
-  const body = await readBody<LogglyBody>(event)
-
-  const scrubbed = {
-    level: body?.level ?? 'error',
-    message: body?.message?.toString().slice(0, 5000),
-    tags: [...new Set([...(pub.logglyTags || []), ...(body?.tags || [])])].slice(0, 10),
-    meta: sanitizeMeta(body?.meta),
-    error: body?.error ? serializeError(body.error) : undefined,
-    ts: new Date().toISOString()
-  }
-
-  const url = `${logglyEndpoint}/${encodeURIComponent(logglyToken)}/tag/${encodeURIComponent(scrubbed.tags.join(','))}`
-
-  try {
-    await $fetch(url, { method: 'POST', body: scrubbed })
-    return { ok: true }
-  }
-  catch {
-    // do not throw here to avoid cascading failures
-    return { ok: false }
-  }
-})
+export { default } from './log.post'

package/server/plugins/loggly.ts

@@ -3,13 +3,12 @@ type NitroErrorCtx = {
     path?: string
     method?: string
     node?: { res?: { statusCode?: number } }
+    context?: Record<string, unknown>
   }
 }
 
 const toErrorShape = (err: unknown) => {
-  if (!err || typeof err !== 'object') {
-    return undefined
-  }
+  if (!err || typeof err !== 'object') return undefined
   const e = err as { name?: string, message?: unknown, stack?: unknown }
   return {
     name: e.name || 'Error',
@@ -22,13 +21,58 @@ export default defineNitroPlugin((nitroApp) => {
   const config = useRuntimeConfig()
   if (!config.public?.logglyEnabled || !config.logglyToken) return
 
+  // Minimal, process-local de-duplication to cover cases where Nitro emits
+  // the same error twice (e.g., once without a ctx.event and then again with it).
+  // We keep a tiny TTL so distinct errors still flow freely.
+  const recent = new Set<string>()
+  const remember = (sig: string) => {
+    recent.add(sig)
+    setTimeout(() => recent.delete(sig), 1000) // 1s window
+  }
+
+  const toSig = (error: unknown, ctx?: NitroErrorCtx) => {
+    let base: string | undefined
+    if (error && typeof error === 'object') {
+      const e = error as { name?: string, message?: unknown }
+      base = `${e.name || 'Error'}:${String(e.message ?? 'Error')}`
+    }
+    else if (typeof error === 'string') {
+      base = `str:${error}`
+    }
+    else {
+      base = 'unknown'
+    }
+    const m = ctx?.event?.method
+    const p = ctx?.event?.path
+    const s = ctx?.event?.node?.res?.statusCode
+    return [base, m, p, s].filter(v => v !== undefined && v !== '').join('|')
+  }
+
   nitroApp.hooks.hook('error', async (error: unknown, ctx?: NitroErrorCtx) => {
     try {
-      await $fetch('/api/loggly', {
+      // Per-request guard: only log once per request lifecycle
+      const LOGGED_ONCE_KEY = '__loggerLoggedOnce' as const
+      type CtxStore = Record<string, unknown> & { [LOGGED_ONCE_KEY]?: boolean }
+      if (ctx?.event) {
+        const current = (ctx.event.context as CtxStore) || (ctx.event.context = {} as CtxStore)
+        if (current[LOGGED_ONCE_KEY]) return
+        current[LOGGED_ONCE_KEY] = true
+      }
+
+      // Process-local, short-lived dedup guard to catch duplicate emissions
+      const sig = toSig(error, ctx)
+      if (sig) {
+        if (recent.has(sig)) return
+        remember(sig)
+      }
+
+      await $fetch('/api/log', {
         method: 'POST',
         body: {
           level: 'error',
-          message: (typeof error === 'object' && error && 'message' in error) ? String((error as { message?: unknown }).message) : 'Server error',
+          message: (typeof error === 'object' && error && 'message' in error)
+            ? String((error as { message?: unknown }).message)
+            : 'Server error',
           error: toErrorShape(error),
           meta: {
             url: ctx?.event?.path,