@cooperco/nuxt-layer-base 1.1.0 → 1.2.1

package/README.md

@@ -19,6 +19,7 @@ Learn more in the official Nuxt Layers documentation: https://nuxt.com/docs/guid
 - TypeScript with strict mode enabled
 - ESLint via `@nuxt/eslint` with stylistic Vue template rules
 - Internationalization (i18n) via `@nuxtjs/i18n`
+- Hints and best practices via `@nuxt/hints`
 - Nuxt DevTools enabled in development
 - Optional error and event logging to Loggly (client and server), disabled by default
 
@@ -46,7 +47,7 @@ export default defineNuxtConfig({
 })
 ```
 
-TypeScript strict mode and DevTools are active immediately. For ESLint, add a config in your app (see "ESLint in consumer apps").
+TypeScript strict mode and DevTools are active immediately. For ESLint, add a config in your app (see "ESLint in consumer apps"). For `@nuxt/hints`, you must also install it as a dev dependency in your app (see "Hints and Best Practices (@nuxt/hints)").
 
 ### Internationalization (i18n)
 
@@ -94,6 +95,27 @@ const { t } = useI18n()
 
 Both global files (e.g., `locales/en.json`) and per‑component `<i18n>` blocks are supported.
 
+### Hints and Best Practices (@nuxt/hints)
+
+This layer includes `@nuxt/hints`, which provides real-time suggestions for improving your application's performance, security, and best practices directly in your development environment.
+
+#### Important: Runtime Dependency
+
+Because `@nuxt/hints` injects runtime code into your components (to track hydration and other metrics), you **must** add `@nuxt/hints` to your app's `devDependencies` even though it is provided by the layer. This ensures that the bundler can resolve the injected imports.
+
+```bash
+# npm
+npm i -D @nuxt/hints
+
+# pnpm
+pnpm add -D @nuxt/hints
+
+# yarn
+yarn add -D @nuxt/hints
+```
+
+*Note: If you are using a monorepo with workspaces (e.g., pnpm workspaces) where dependencies are hoisted to the root, this manual installation may not be necessary.*
+
 ### Logging (optional, Loggly‑backed)
 
 When enabled via environment variables, the base layer will:
@@ -174,16 +196,45 @@ import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt({
   rules: {
-    // Stylistic
-    '@stylistic/comma-dangle': ['error', 'never'],
-
-    // TypeScript
-    '@typescript-eslint/no-unused-vars': ['error', { caughtErrorsIgnorePattern: '^_' }],
-
-    // Vue template
-    'vue/html-closing-bracket-newline': ['error', { multiline: 'never', selfClosingTag: { multiline: 'never' } }],
-    'vue/html-closing-bracket-spacing': ['error', { selfClosingTag: 'never' }],
-    'vue/html-indent': ['error', 2, { baseIndent: 0 }]
+    /* 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']
   }
 })
 ```
@@ -202,62 +253,62 @@ export default withNuxt({
 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: 'never'` — Disallow trailing commas in arrays/objects.
-    - Bad:
-      ```js
-      const user = {
-        id: 1,
-        name: 'Ada',
-      }
-      ```
-    - Good:
+  - `@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'
+      	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()
+      	risky()
       }
       catch (_err) {
-        // intentionally ignored
+      	// 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
-      <MyComp
-        a="1"
-        b="2"
+      <my-comp
+      	a="1"
+      	b="2"
       />
       ```
     - Good:
       ```vue
-      <MyComp
-        a="1"
-        b="2" />
+      <my-comp
+      	a="1"
+      	b="2" />
       ```
   - `vue/html-closing-bracket-spacing: { selfClosingTag: 'never' }` — No space before a self‑closing `/>`.
-    - Bad: `<MyComp />`
-    - Good: `<MyComp/>`
-  - `vue/html-indent: [2, { baseIndent: 0 }]` — Two‑space indentation in templates.
+    - 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>
+      	<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
 

package/eslint.config.mjs

@@ -32,7 +32,17 @@ export default withNuxt({
     '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']
   }
 })
 

package/nuxt.config.ts

@@ -1,6 +1,6 @@
 /* eslint-disable nuxt/nuxt-config-keys-order */
 export default defineNuxtConfig({
-  modules: ['@nuxt/eslint', '@nuxtjs/i18n'],
+  modules: ['@nuxt/eslint', '@nuxtjs/i18n', '@nuxt/hints'],
   devtools: { enabled: true },
   compatibilityDate: '2025-07-15',
 
@@ -30,6 +30,10 @@ export default defineNuxtConfig({
     config: {
       stylistic: true
     }
+  },
+
+  i18n: {
+    defaultLocale: 'en'
   }
 
-})
+})

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@cooperco/nuxt-layer-base",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "./nuxt.config.ts",
+  "author": "cooperco",
+  "description": "Base Nuxt layer for cooperco projects",
+  "license": "MIT",
   "scripts": {
     "dev": "nuxt dev",
-    "lint": "nuxt prepare && eslint .",
-    "lint:fix": "nuxt prepare && eslint . --fix",
-    "typecheck": "nuxt prepare && vue-tsc -b --noEmit"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "nuxt typecheck"
   },
-  "description": "Base Nuxt layer for cooperco projects",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -19,16 +21,15 @@
     "url": "git+https://github.com/Cryobank/nuxt-layers.git",
     "directory": "layers/base"
   },
-  "author": "cooperco",
-  "license": "MIT",
   "dependencies": {
-    "@nuxt/eslint": "^1.10.0",
+    "@nuxt/hints": "^1.0.0-alpha.5",
     "@nuxtjs/i18n": "^10.2.1",
-    "nuxt": "^4.2.1"
+    "nuxt": "^4.2.2"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "^3.20.1",
-    "eslint": "^9.39.1",
-    "vue-tsc": "^3.1.4"
+    "@nuxt/eslint": "^1.12.1",
+    "@nuxt/test-utils": "^3.23.0",
+    "eslint": "^9.39.2",
+    "vue-tsc": "^3.2.2"
   }
 }