Unplugin-generate-component-name NPM

unplugin-generate-component-name

A plugin for auto generate vue component name.

Features

💚 Supports Vue 3 out-of-the-box.
⚡️ Supports Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
🪐 Folder names and Setup extend two patterns.
🦾 Full TypeScript support.

Install

# Yarn
$ yarn add unplugin-generate-component-name -D

# Pnpm
$ pnpm i unplugin-generate-component-name -D

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'

export default defineConfig({
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
})

// rollup.config.js
import GenerateComponentName from 'unplugin-generate-component-name/rollup'

export default {
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-generate-component-name/webpack').default({ /* options */ }),
  ],
}

Usage

Folder names

You can use the name of the directory where the Index Component resides as the name of the component.

Generating Vue Component Names

In Vue, we can use the unplugin-generate-component-name plugin to automatically generate component names based on directory names. This plugin makes it easier and more intuitive to find and manage components in a large codebase. For instance, let's say we have a Vue component named Index.vue, and this component is in the Home directory. With the unplugin-generate-component-name plugin, this component will automatically be named Home.

src/home/
├── index.vue // component name is Home
├── about.vue
└── users/
    ├── index.vue // component name is Users
    └── info.vue

Setup Extend

Continuing with the Setup Extend demo is writing the name="Home" on the script tag.

<template>
  <!-- Your component marker -->
</template>

<script setup name="Home">
  // Your script logic
</script>

<style>
  <!-- Your component style -->
</style>

In the <script setup> tag, we set the name attribute to "Home". This explicitly names the component "Home", and the unplugin-generate-component-name plugin will use this name instead of "Index".

Please note that you should first install and correctly configure the plugin in your vite.config.js or webpack.config.js file.

Options

type GenComponentName = (opt: {
    filePath: string;
    dirname: string;
    originalName: string;
    attrName: string | undefined;
}) => string;
interface PattenOptions {
    include?: string | RegExp | (string | RegExp)[];
    exclude?: string | RegExp | (string | RegExp)[];
    genComponentName: GenComponentName;
}
interface Options extends Omit<PattenOptions, 'genComponentName'> {
    enter?: PattenOptions[];
}

include

The include option is utilized to specifically state the files that should be processed for component name auto-generation. This safeguard can be specified using a string, a regular expression, or an array that can hold a collection of both.

exclude

On the flip side, the exclude option operates by dictating the files that should abstain from the auto-generation process. This restriction can also be imposed using a string, a regular expression, or a combination of both held in an array.

enter

In the Options interface, there's an enter option. enter is an array where each object acts as a specific set of rules for handling different file paths.

Each set of rules can include include and exclude options which specify which files need special handling. Their value can be a string, a RegExp, or an array consisting of strings and RegExps. You can also specify a genComponentName function for custom component name generation.

Here's an example:

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'

export default defineConfig({
  plugins: [
     GenerateComponentName({
      include: ['**/*.vue'],
      enter: [{
        include: ["**/*index.vue"],
        genComponentName: ({ attrName, dirname }) => attrName ?? dirname
      }, {
        exclude: ['**/*.index.vue'],
        include: ["src/components/**/*.vue"],
        genComponentName: ({ dirname, originalName }) => `${dirname}-${originalName}`
      }]
    }),
  ],
});

In this example, the unplugin-generate-component-name plugin is configured to process all .vue files. There are two objects within the enter option for different file paths:

The first object covers all files that end with "index.vue". The genComponentName function returns the component name. If a name is already specified in the script setup tag, it will be prioritized; otherwise, the directory name (dirname) will be used.
The second object excludes all files ending with "index.vue" and only includes .vue files within the "src/components/" directory. A genComponentName function is used to generate the component name in the format of ${dirname}-${originalName}.For instance, for a file namedMyButton.vue in src/components/Button, it will beButton-MyButton.