Vue auto-import checker

npm: vue-auto-import-checker

• Description
• Why?
• Requirements
• Installation
• Usage
• CLI Options
• Known Frameworks
• CI/CD Integration
• Security
• Importers
• Contributors
• Feedback & Contributions

Description

A CLI tool that checks if every tag used in your Vue templates is either properly registered in components.d.ts when using unplugin-vue-components (or similar auto-import setups), is a tag from a standard library like HTML, SVG, Vue, or VueRouter, or a tag from a framework like Vuetify or Nuxt.

You can configure which tag sets the checker should handle as if they were known. HTML, Vue, VueRouter, and SVG tags are known by default, but you can remove them from the known list if needed.

To have a framework on the known list, you only need to provide its name. Look up what we support at the moment (Nuxt, PrimeVue, Vuetify, ...) in the section Known Frameworks.

It is also possible to provide your own list of known tags by providing a custom-tags-file in JSON format or a simple list of tags.

You can also use the importer tools to use your own list of tags for Vuetify, VueUse, Quasar, Nuxt, Naive UI, and PrimeVue if your version is not yet supported by the tool.

Why?

Why does this tool exist?

Because of migration from older codebases and toolsets to modern ones.

My experience as a developer showed me that the decision to use the top end toolset does come one day and then the migration is oftentimes not a recommendation from the customer, but from the developer team. That means the migration is not paid work. So it is not made as a priority.
Using something like the unplugin for your vue project is recommended. But the migration is not always easy. You have to change your codebase, and you have to make sure that you do not forget any tags. This tool helps you with that. It checks your codebase for unknown tags and tells you where they are. So you can easily find and fix them.

Requirements

Node

We recommend using:

• Latest Node.js 24.x LTS (minimum required 20.19.1)

Other versions might work but are not tested.

Vue

The supported Vue files should use Single-File Components (also known as *.vue files, abbreviated as SFC). That means we assume to have files in your project path that are looking like this:

<script>
/* Typescript or Javascript content */
</script>

<template>
  <!-- HTML content -->
</template>

<style>
/* CSS content */
</style>

We also assume to have at minimum the template section in your files.

Installation

 npm i vue-auto-import-checker

Usage

The help of the CLI tool is a good starting point.

 npx vue-auto-import-checker -h

But you can also start with an example from our cookbook.md.

CLI Options

| Option | Alias | Description | Default | |---------------------------------|-------|-------------------------------------------------------------------------------------------------------------|---------------------------| | --components-file <file-path> | -c | Path to a file exporting registered components (relative to current working directory) | "" | | --project-paths [path...] | -p | List of directorys paths containing Vue project files to scan (relative to current working directory) | [] | |--cache-path |-a | Directory for storing and looking up cached/custom known files (relative to current working directory) |"./node_modules/.cache"| |--tool |-t | Run a specific helper tool (e.g., Nuxt, PrimeVue, Quasar, VueUse, Vuetify) to generate customized tag lists |"" | |--stats |-s | Output aggregated scan statistics |false | |--result |-r | Output detailed result entries for each found component |false | |--quiet |-q | Suppress all standard output |false | |--known-tags [tags...] |-l | List of custom component tags to treat as known |[] | |--known-tags-file |-j | Path to a JSON file containing a list of component tags to treat as known |"" | |--frameworks [frameworks...] |-f | Predefined framework tag sets (e.g., Vuetify, VueUse, Quasar, Nuxt, Naive UI, PrimeVue) as known |[] | |--negate-known [sets...] |-n | Explicitly treat tag sets as known (e.g., HTML, SVG, Vue, VueRouter) |[] | |--kafka |-k | Output each found tag with its framework and whether it is recognized |false | |--debug |-d | Enable detailed debug logging |false | |--imports-known |-i | Treat tags matching imported components as known |false | |--version |-v | Output the current version |false | |--help |-h | Display help information |false` |

Known Frameworks

Currently, we support:

• Vuetify >= 3.8.4
• VueUse >= 13.6.0
• Quasar >= 1.16.0
• Nuxt >= 4.2.1
• Naive UI >= 2.43.2
• PrimeVue >= 4.5.3

Other versions might work but are not tested.

If you want to use a framework version that is not yet supported, you can use the importer tools to provide your own list of tags.

We are working on more.

Known Framework tags

Depending on which framework you are using in the project, add the strings to the command line.

 # These are all known framework names
 vuetify
 vueuse
 quasar
 nuxt
 naiveui
 primevue

CI/CD Integration

This tool is CI-friendly

• If unknown tags are detected, the CLI will exit with a non-zero status code
• If no issues are found, e.g., no unknown tags are found, it will exit successfully with code 0.

This allows you to easily break builds when auto-imports are missing.

Security

See security.md in the docs folder.

Importers

Use a tag list from the specific version that your project is using by using a specific importer.

Every importer has its own README.md file so you can look up your specific use case.

• Vuetify -> README.md
• VueUse -> README.md
• Quasar -> README.md
• Nuxt -> README.md
• Naive UI -> README.md
• PrimeVue -> README.md

Contributors

Thanks for the contribution of code, ideas and motivation to:

Thanks to Matthias for the idea.

Spezial thanks to my family, to my wife Jiyeop and to my son Ryan.

Feedback & Contributions

If this tool helps you out, consider leaving a star on the repository — it really motivates further development!

Found a bug? Something not working as expected?
Please open an issue so it can be fixed quickly.

Missing a feature you’d love to see?
Feature requests are very welcome as well!

Thanks for helping make Vue Auto-Import Checker better for everyone! 🙌