https://github.com/CCherry07/unplugin-generate-component-name
A plugin for auto generate vue component name.
https://github.com/CCherry07/unplugin-generate-component-name
Last synced: 8 days ago
JSON representation
A plugin for auto generate vue component name.
- Host: GitHub
- URL: https://github.com/CCherry07/unplugin-generate-component-name
- Owner: CCherry07
- Created: 2023-12-11T12:20:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-04T15:48:32.000Z (10 months ago)
- Last Synced: 2025-04-01T10:37:46.799Z (19 days ago)
- Language: TypeScript
- Homepage:
- Size: 163 KB
- Stars: 21
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - unplugin-generate-component-name - Automatically generate component's name. (Plugins / Framework-agnostic Plugins)
- awesome-vite - unplugin-generate-component-name - Automatically generate component's name. (Plugins / Framework-agnostic Plugins)
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](https://cn.vuejs.org/api/sfc-script-setup.html#script-setup) two patterns.
- 🦾 Full TypeScript support.
## Install
```bash
# Yarn
$ yarn add unplugin-generate-component-name -D
# Pnpm
$ pnpm i unplugin-generate-component-name -D
```
Vite
```ts
// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'
export default defineConfig({
plugins: [
GenerateComponentName({ /* options */ }),
],
})
```
Rollup
```ts
// rollup.config.js
import GenerateComponentName from 'unplugin-generate-component-name/rollup'
export default {
plugins: [
GenerateComponentName({ /* options */ }),
],
}
```
Webpack
```ts
// 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`.
```text
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.
```html
// Your script logic
<!-- Your component style -->
```
In the `` 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
```ts
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:
```ts
// 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 named`MyButton.vue` in `src/components/Button`, it will be`Button-MyButton`.