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

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

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

Rollup

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

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

Webpack

// 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.