Vue auto-import checker

• Description
• Requirements
• Installation
• CLI-Options
• Usage
• Examples
• CI/CD Integration
• Security
• Contributors
• Feedback & Contributions

Description

A CLI tool that checks whether every non-HTML tag used in your Vue templates is properly registered in components.d.ts when using unplugin-auto-import (or similar auto-import setups).

You can configure which tag-sets the checker should ignore. HTML, Vue, VueRouter and SVG tags are ignored by default. You can remove them from the ignore list if needed.

Choose also if the checker should ignore other tags of famous frameworks. Currently, we support:

• vuetify (currently v3.8.3)*
• VueUse (currently v13.5.0)*
• quasar (currently v1.15.8)*
• nuxt (currently v4.2.1)*
• others are work in progress ...

But you can provide your own list by passing a customtagsfile in json format with your individual ignore tags.

You can also use the importer tools to use your own list of tags for vuetify, VueUse, quasars & nuxt.

*See the Usage section for more vuetify, VueUse, quasar & nuxt related information.

Requirements

We recommend using:

• Node.js >= 24.0.0 (minimum required 20.19.1)

Installation

 npm i vue-auto-import-checker

CLI Options

| Option | Alias | Description | Default | |-------------------------------------|-------|------------------------------------------------------|------------------------| | --components-file <file> | -c | Path to the components.d.ts file (relative to CWD) | "./components.d.ts" | | --project-path <path> | -p | Path to the Vue source directory (relative to CWD) | "" | | --stats | -s | Print a summary of the check | false | | --result | -r | Print detailed results | false | | --quiet | -q | Suppress all output | false | | --customtags [customtags...] | — | Ignore these tags | [] | | --customtagsfile <customtagsfile> | — | Ignore tags listed in this json file | "" | | --vuetify | — | Ignore Vuetify tags | false | | --vueuse | — | Ignore VueUse tags | false | | --quasar | — | Ignore quasar tags | false | | --nuxt | — | Ignore nuxt tags | false | | --novue | — | Do not ignore Vue tags | false | | --novuerouter | — | Do not ignore VueRouter tags | false | | --nosvg | — | Do not ignore svg element tags | false | | --nohtml | — | Do not ignore HTML element tags | false | | --tool <tool> | -t | use a tool to customize your checker | "" | | --version | -v | Show the currently installed version | — | | --debug | — | Show debug log | false | | --help | -h | Display help information | — |

Usage

The help of the cli tool is a good starting point, but you can also start with an example from our examples.

 npx vue-auto-import-checker -h

Vuetify >= 3.8.4

We provide a list of vuetify tags from version 3.8.3 out of the box.

But you can import your own set of tags by using the vuetify-importer tool.

 npx vue-auto-import-checker -t vuetify-importer

This will add a new vuetify tag-list from your actual vuetify implementation, so that the checker ignores all vuetify tags from your current vuetify version. (tested with vuetify v3.8.3 and v3.11.1)

This will add a folder (.cache) to your node_modules folder.

Try to use other versions and report, for which version the importer works.

VueUse >= 13.6.0

We provide a list of VueUse tags from version 13.5.0 out of the box.

But you can import your own set of tags by using the vueuse-importer tool.

 npx vue-auto-import-checker -t vueuse-importer

This will add a new vueUse tag-list from your actual vueUse implementation, so that the checker ignores all vueUse tags from your current vueUse version. (tested with @vueuse/components v13.5.0 and v14.0.0)

This will add a folder (.cache) to your node_modules folder.

Try to use other versions and report, for which version the importer works.

Quasar >= 1.16.0

We provide a list of quasar tags from version 1.15.8 out of the box.

But you can import your own set of tags by using the quasar-importer tool.

 npx vue-auto-import-checker -t quasar-importer

This will add a new quasar tag-list from your actual quasar implementation, so that the checker ignores all quasar tags from your current quasar version. (tested with quasar v1.15.8)

This will add a folder (.cache) to your node_modules folder.

Try to use other versions and report, for which version the importer works.

Nuxt >= 4.2.1

We provide a list of nuxt tags from version 4.2.1 out of the box.

But you can import your own set of tags by using the nuxt-importer tool.

 npx vue-auto-import-checker -t nuxt-importer

This will add a new nuxt tag-list from your actual nuxt implementation, so that the checker ignores all nuxt tags from your current nuxt version. (tested with Nuxt v4.2.1)

This will add a folder (.cache) to your node_modules folder.

Try to use other versions and report, for which version the importer works.

Node.js

Tested with Node.js 20.19.1, 22.15.1, 22.18.1 & 24.11.1

Try to use other versions and report, for which version the cli works.

Examples

1. Example

• Your components.d.ts file lives at:
  ./tests/data/vue-test-project/components.d.ts
• Vue component files are located in:
  ./tests/data/vue-test-project/src/
• You are using Vuetify, VueUse and a custom component named ToolingIcon
• And you want to see a report and a statistical output

 npx vue-auto-import-checker \
  -c ./tests/data/vue-test-project/components.d.ts \
  -p ./tests/data/vue-test-project/src/ \
  --vuetify \
  --vueuse \
  --customtags ToolingIcon EcosystemIcon \
  -r \
  -s

or

2. Example

• Your components.d.ts file lives at:
  ./tests/data/vue-test-project/components.d.ts
• Vue component files are located in:
  ./tests/data/vue-test-project/src/
• You are using Vuetify and a custom component named ToolingIcon
• And you only want to have this tool in your CI workflow to fail or pass

 npx vue-auto-import-checker \
  -c ./tests/data/vue-test-project/components.d.ts \
  -p ./tests/data/vue-test-project/src/ \
  --vuetify \
  --customtags ToolingIcon EcosystemIcon

or

3. Example

• Your components.d.ts file lives at:
  ./tests/data/vue-test-project/components.d.ts
• And you only want a list of all tags the components.d.ts file is providing

 npx vue-auto-import-checker -c ./tests/data/vue-test-project/components.d.ts

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, it will exit successfully with code 0

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

Security

The tool will need some read and write permissions on your local hard disc.

To use the tool without any custom file (vuetify, vueUse, customTagFile), the tool needs:

• read-permission to the files and folders of project-path
• read-permission for the components-file-path

If you want to use a customTagFile, the tool needs additionally:

• read-permission for the customtagsfile-path

If you want to use custom vuetify or VueUse tag-lists, the tool needs additionally:

• read-permission for the node_modules-path and its subfolders
• write-permission for the node_modules-path and its subfolders
• read-permission for the node_modules-path and the subfolders

The tool will add a folder .cache as a subfolder to the node_modules-folder for your custom vuetify or VueUse tag-lists.

Contributors

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

Special thanks to Matthias for the idea.

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 on 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! 🙌