nuxt-eslint-auto-components-import v0.0.4

Nuxt ESLint - Auto Components Import

!IMPORTANT Experimental :)

Setup

npm i -D nuxt-eslint-auto-components-import @nuxt/eslint

Configuration

export default defineNuxtConfig({
  modules: [
    // Both modules are required
    '@nuxt/eslint',
    'nuxt-eslint-auto-components-import'
  ],
  eslintAutoComponentsImport: {
    // Whether to use relative path imports
    // If false, will use #components alias
    // Default: true
    relative: true
  }
})

!TIP It's recommended to use it with @antfu/nuxt-eslint-auto-explicit-import for the best auto-import experience.

Usage

This module automatically handles component imports. When you use a component in your file, ESLint will automatically add the necessary import statements.

Example

<script setup>
// or
import { TestComponent } from '#components' // when relative: false
import { TestComponent } from './components/TestComponent.vue' // when relative: true
</script>

<!-- ESLint will automatically add the following imports -->
<template>
  <TestComponent />
</template>

Credits

• This project is heavily inspired by nuxt-eslint-auto-explicit-import