unplugin-generate-component-name
v0.3.0
Published
A plugin for auto generate vue component name.
Downloads
101
Readme
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"
. ThegenComponentName
function returns the component name. If aname
is already specified in thescript 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. AgenComponentName
function is used to generate the component name in the format of${dirname}-${originalName}
.For instance, for a file namedMyButton.vue
insrc/components/Button
, it will beButton-MyButton
.