# vue-template-reuse-compiler

> A vue-template-compiler that reuse template in a SFC file.

Latest version **0.1.1** (published 2021-12-14) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-12-14 |
| First published | 2021-12-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | lauginwing |
| Keywords | vue, template, compiler, HTML, reuse, webpack |

## Links

- npm: https://www.npmjs.com/package/vue-template-reuse-compiler
- Repository: https://github.com/JRliu/vue-template-reuse
- Homepage: https://github.com/JRliu/vue-template-reuse#readme
- Issues: https://github.com/JRliu/vue-template-reuse/issues
- npm.io page: https://npm.io/package/vue-template-reuse-compiler

## Dependencies (3)

- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.10
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.16.0
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.6.14

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2021-12-14
- 0.0.3-beta — 2021-12-10
- 0.0.2-beta — 2021-12-06
- 0.0.1-beta — 2021-12-02

## README

# vue-template-reuse-compiler

This package allowed you to reuse template fragment in SFC, such as

```vue
<template>
	<!-- defined a avatar template -->
	<template v-tpl="avatar" v-tpl-data="localUser">
		<img class="avatar" :src="localUser.avatar_url" />
		<span class="name">name: {{ localUser.name }}</spam>
	</template>

	<!-- use avatar template -->
	<template v-tpl-use="avatar" v-tpl-bind="{avatar_url:'test1.png', name: 'tony'}"></template>

	<template v-tpl-use="avatar" v-tpl-bind="user2"></template>

	<template v-tpl-use="avatar" v-tpl-bind="{avatar_url:'test3.png', name: 'amy'}"></template>
</template>

<script>
export default {
  data: function () {
    return {
      user2: {
        name: "jenny",
        avatar_url: "test2.png",
      }
    };
  },
};
</script>
```

a detailed example: [Example](./example)

Actually, you can use [pug](https://pugjs.org/language/mixins.html) or jsx to achieve.

## How to use

```
yarn add vue-template-reuse-compiler -D
```

if you use vue-cli, edit your vue.config.js:

```
const getCompiler = require('vue-template-reuse-compiler')
module.exports = {
  ...
  chainWebpack: (config) => {
	...
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compiler = getCompiler();

        return options;
      });
  },
};
```

if you used a special compiler instead of `vue-template-compiler`, you can do this:

```
const yourCompiler = require('your-compiler')
const getCompiler = require('vue-template-reuse-compiler')
module.exports = {
  ...
  chainWebpack: (config) => {
	...
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compiler = getCompiler(yourCompiler);

        return options;
      });
  },
};
```

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