eslint-plugin-vue-modular

A custom ESLint plugin for enforcing modular patterns in Vue projects.

Modular Architecture in Vue

In Vue applications, modular architecture means organizing your codebase into self-contained feature modules. Each module typically contains its own components, composables, stores, and styles, grouped by feature rather than by file type. This approach improves maintainability, scalability, and testability by reducing coupling and clarifying dependencies.

With modular architecture, you can:

• Keep related logic together, making features easier to develop and refactor.
• Prevent accidental imports between unrelated features, enforcing clear boundaries.
• Enable teams to work independently on different modules.
• Simplify onboarding by making the project structure more intuitive.

See the Vue Modular Architecture for more details and rationale behind modular structure.

The eslint-plugin-vue-modular plugin helps enforce these boundaries, ensuring that your Vue project remains modular as it grows.

Features

• Custom linting rules for Vue modular architecture
• Supports single-file components (SFC)
• Enforces architectural boundaries between features
• Supports flat config only (ESLint v9+)
• Easily extendable for your team's needs

Installation

This package is published on npm and should be installed as a devDependency in your project.

npm install eslint-plugin-vue-modular --save-dev

ESLint is not bundled with eslint-plugin-vue-modular. You need to install ESLint separately in your project.

Usage

We provide two predefined configurations to help enforce modular architecture principles in your Vue.js projects:

• recommended - enables the rules that follow best practices for modular architecture and Vue.js development.
• all - enables all of the rules shipped with eslint-plugin-vue-modular.

ESLint v9+ Configuration

import vueModular from 'eslint-plugin-vue-modular'

export default [...vueModular.configs.recommended]

Project options / settings (flat-config)

When using ESLint v9+ flat config or any setup that supports settings, plugin-wide project options should be placed under settings['vue-modular'].

Example (flat config):

export default [
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
    plugins: { 'vue-modular': vueModular },
    settings: {
      'vue-modular': {
        // optional overrides; omitted keys fall back to sensible defaults
        rootPath: 'src',
        rootAlias: '@',
        appPath: 'src/app',
        layoutsPath: 'src/app/layouts',
        featuresPath: 'src/features',
        sharedPath: 'src/shared',
        componentsFolderName: 'components',
        viewsFolderName: 'views',
        uiFolderName: 'ui',
      },
    },
  },
]

Notes:

• The plugin merges any provided settings with built-in defaults, so you only need to set the keys you want to override.
• Rule-level options (for example the file-ts-naming rule) remain available per-rule; file-ts-naming accepts an ignores array. The default ignore globs are ['**/*.d.ts', '**/*.spec.*', '**/*.test.*', '**/*.stories.*'].

Quick Start

1. Install the plugin: npm install eslint-plugin-vue-modular --save-dev
2. Add the recommended configuration to your ESLint config
3. Run: bunx eslint src/

The plugin will now enforce modular architecture patterns in your Vue.js project!

Rules

This plugin provides rules to enforce modular architecture boundaries in Vue.js applications. Here is a summary of the available rules:

| Rule | Description | | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | app-imports | App folder can import from shared and features with specific exceptions | | components-index-required | All components folders must contain an index.ts file for component exports | | cross-imports-alias | Cross-layer imports must use the project root alias instead of absolute paths | | feature-imports | Features should only import from the shared layer or their own internal files | | feature-index-required | Each feature folder must contain an index.ts file as its public API | | file-component-naming | All Vue components must use PascalCase naming | | file-ts-naming | All TypeScript files must use camelCase naming | | folder-kebab-case | All folders must use kebab-case naming | | internal-imports-relative | Prefer relative imports for local feature/shared/app files but suggest alias for deep relative traversals. | | service-filename-no-suffix | Service files must not have Service suffix | | sfc-order | Enforce SFC block order: script, template, style | | sfc-required | All Vue components should be written as Single File Components | | shared-imports | Shared folder cannot import from features or views | | shared-ui-index-required | The shared/ui folder must contain an index.ts file for UI component exports | | store-filename-no-suffix | Store files must not have Store suffix | | stores-location | Store files must live under shared/stores or features/*/stores | | views-suffix | View files must end with View.vue suffix |

Contributing

We welcome contributions!

If you have ideas or suggestions for new rules or improvements, please open an issue. Let's discuss and probably add new rules that can make our Vue projects better!

If you want to contribute code, please fork the repository and create a pull request with your changes. Make sure to include tests for any new functionality. See CONTRIBUTING for more details.

License

MIT, see LICENSE for details.