Eslint Plugin Nuxt Layers

eslint-plugin-nuxt-layers

ESLint plugin for Nuxt 4 projects that use a layered folder layout. Enforce architectural boundaries between layers with configurable import rules.

Why?

In a Nuxt 4 project with multiple layers, you want to prevent unwanted dependencies between layers. For example:

• shared layer should not import from any other layer
• products and cart can import from shared but not from each other
• app can import from everything

This plugin helps you enforce these rules automatically through ESLint.

Features

✅ **Comprehensive import detection** - Checks ES6 imports, dynamic imports, CommonJS require, export-from, and export-all ✅ **Smart path resolution** - Handles both alias imports (`#layers/shared`) and relative imports (`../../shared`) ✅ **Configuration validation** - Warns you if you reference non-existent layers in your config ✅ **Helpful error messages** - Shows the import path and suggests how to fix violations ✅ **Cross-platform** - Works on Windows, macOS, and Linux ✅ **Flexible naming** - Supports layer names with hyphens, underscores, and special characters

Install

npm install eslint-plugin-nuxt-layers --save-dev

Usage

Quick start

In your `eslint.config.js` (ESLint 9+ flat config):

import nuxtLayers from 'eslint-plugin-nuxt-layers'

export default [
  {
    plugins: {
      'nuxt-layers': nuxtLayers,
    },
    rules: {
      'nuxt-layers/layer-boundaries': [
        'error',
        {
          root: 'layers',
          aliases: ['#layers', '@layers'],
          layers: {
            shared: [],
            products: ['shared'],
            cart: ['shared'],
            app: ['*'],
          },
        },
      ],
    },
  },
]

Or use the recommended config:

import nuxtLayers from 'eslint-plugin-nuxt-layers'

export default [
  {
    plugins: {
      'nuxt-layers': nuxtLayers,
    },
    rules: nuxtLayers.configs.recommended.rules,
  },
]

Configuration