# unplugin-vue-reuse-template

> An simple template reuse in Vue3

Latest version **0.0.5** (published 2023-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install unplugin-vue-reuse-template
pnpm add unplugin-vue-reuse-template
yarn add unplugin-vue-reuse-template
bun add unplugin-vue-reuse-template
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-03-19 |
| First published | 2023-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.19.0 |
| Dependencies | 8 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | liulinboyi |
| Maintainers | liulinboyi |
| Keywords | unplugin, vue, script-setup, template, reuse, typescript |

## Links

- npm: https://www.npmjs.com/package/unplugin-vue-reuse-template
- Repository: https://github.com/liulinboyi/unplugin-vue-reuse-template
- Issues: https://github.com/liulinboyi/unplugin-vue-reuse-template/issues
- npm.io page: https://npm.io/package/unplugin-vue-reuse-template

## Dependencies (8)

- [unplugin](https://npm.io/package/unplugin.md) ^0.7.2
- [typescript](https://npm.io/package/typescript.md) ^4.7.4
- [magic-string](https://npm.io/package/magic-string.md) ^0.26.7
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.19.4
- [@vue/compiler-dom](https://npm.io/package/@vue/compiler-dom.md) ^3.2.40
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.2.37
- [@vue/compiler-core](https://npm.io/package/@vue/compiler-core.md) ^3.2.40
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^4.2.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2023-03-19
- 0.0.4 — 2023-03-19
- 0.0.3 — 2023-03-19
- 0.0.2 — 2023-03-19
- 0.0.1 — 2023-03-19

## README

# unplugin-vue-reuse-template

An simple template reuse in Vue3

在Vue3中使用此款插件，可以简单复用模板。

# Example
https://github.com/liulinboyi/unplugin-vue-reuse-template-example

## Usage

### Basic example

app.vue
```vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const asAny = (foo: any) => foo as any;
</script>

<!-- Right Case -->
<!-- 正确写法 -->
<!-- The real template must put the top -->
<!-- 真实的template，必须放到最前面 -->
<template>
  <div>
    <container outlet="menu" />
    <div v-for="n in [1,2,3]">
      <container outlet="list" />
    </div>
  </div>
</template>

<template $menu>
  <div class="count" @click="count++">
    {{ count }}
  </div>
</template>

<!-- If you write like this, although it can be run in a development environment, it does not pass type checking when packaging  -->
<!-- It is not recommended to write like this -->
<!-- 如果你这样写，尽管开发环境可以运行，但是打包时无法通过类型检查 -->
<!-- 不推荐这样写 -->
<template $list>
  <div class="list">
    {{ n }}
  </div>
</template>

<style scoped>
.count {
  font-size: 20px;
}
.list {
  font-size: 16px;
  color: aqua;
}
</style>
```

<details>
<summary>Output</summary>

After Format 格式化后
```vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
const asAny = (foo: any) => foo as any;
</script>

<!-- Right Case -->
<!-- 正确写法 -->
<!-- The real template must put the top -->
<!-- 真实的template，必须放到最前面 -->
<template>
  <div>
    <template $menu v-if="true">
      <div class="count" @click="count++">
        {{ count }}
      </div>
    </template>
    <div v-for="n in [1, 2, 3]">
      <template $list v-if="true">
        <div class="list">
          {{ n }}
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.count {
  font-size: 20px;
}
.list {
  font-size: 16px;
  color: aqua;
}
</style>

```

Before Format 格式化之前
```vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const asAny = (foo: any) => foo as any;
</script>

<!-- Right Case -->
<!-- 正确写法 -->
<!-- The real template must put the top -->
<!-- 真实的template，必须放到最前面 -->
<template>
  <div>
    <template $menu v-if="true">
  <div class="count" @click="count++">
    {{ count }}
  </div>
</template>
    <div v-for="n in [1,2,3]">
      <template $list v-if="true">
  <div class="list">
    {{ n }}
  </div>
</template>
    </div>
  </div>
</template>





<style scoped>
.count {
  font-size: 20px;
}
.list {
  font-size: 16px;
  color: aqua;
}
</style>
```

</details>

## Installation

```bash
npm i unplugin-vue-reuse-template -D
```

```ts
// vite.config.ts
import vueReuseTemplate from 'unplugin-vue-reuse-template/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), vueReuseTemplate()],
})
```

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