# vite-plugin-vue-definename

> ---

Latest version **2.0.3** (published 2024-06-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-definename
pnpm add vite-plugin-vue-definename
yarn add vite-plugin-vue-definename
bun add vite-plugin-vue-definename
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2024-06-11 |
| First published | 2022-04-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tflin |
| Keywords | defineName, vite, vite-plugin, vue, vue-plugin, vue3 |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-definename
- npm.io page: https://npm.io/package/vite-plugin-vue-definename

## Dependencies (1)

- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.4.27

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2024-06-11
- 2.0.2 — 2024-06-11
- 2.0.1 — 2024-06-11
- 2.0.0 — 2024-06-11
- 1.2.3 — 2024-06-11
- 1.2.2 — 2024-06-11
- 1.2.1 — 2024-06-11
- 1.2.0 — 2024-06-11
- 1.1.0 — 2024-06-11
- 1.0.8 — 2022-04-07
- 1.0.7 — 2022-04-07
- 1.0.6 — 2022-04-07
- 1.0.5 — 2022-04-07
- 1.0.4 — 2022-04-07
- 1.0.3 — 2022-04-07
- … 3 more at https://npm.io/package/vite-plugin-vue-definename/versions

## README

# vite-plugin-vue-definename

---

vite 插件，在 vue3 setup-script 中使用 `defineName` 来为组件命名。截止目前，vue 官方暂时没有对 setup-script 提供组件命名的方式。

## 如何使用

```bash
npm install vite-plugin-vue-definename -D

or 

pnpm add vite-plugin-vue-definename -D

yarn add vite-plugin-vue-definename -D
```

在 vite 配置文件中

```js
import { defineConfig } from 'vite'
import defineName from 'vite-plugin-vue-definename'

export default defineConfig({
  plugins: [defineName()]
})
```

在 vue 文件中，setup-script 中使用 `defineName` 来为组件命名。

```html
<script lang="ts" setup>
defineName('MyComponent')
</script>
```

typescript 支持，在 tsconfig.json 中，添加

```json
"types": ["vite-plugin-vue-definename"]
```

---

之前在写一个组件库 [sakura-ui](https://github.com/tflins/sakura-ui)，需要对组件进行命名，所以写了个 vite 插件，下图是之前尤小右对 setup-script 命名组件的回复

![img](https://tflins.oss-cn-beijing.aliyuncs.com/img/11649267288_.pic.jpg)

---
_Source: https://npm.io/package/vite-plugin-vue-definename · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._