Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antfu/vue-reuse-template
Define and reuse Vue template inside the component scope.
https://github.com/antfu/vue-reuse-template
Last synced: 8 days ago
JSON representation
Define and reuse Vue template inside the component scope.
- Host: GitHub
- URL: https://github.com/antfu/vue-reuse-template
- Owner: antfu
- License: mit
- Archived: true
- Created: 2023-04-12T16:04:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-14T09:50:07.000Z (over 1 year ago)
- Last Synced: 2024-10-02T07:09:12.401Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 231 KB
- Stars: 440
- Watchers: 2
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
**🚛 This package is now part of VueUse v10**.
👉 Refer to https://vueuse.org/createReusableTemplate instead.
----
Legacy README
# vue-reuse-template
[](https://www.npmjs.com/package/vue-reuse-template)
Define and reuse Vue template inside the component scope.
## Install
```bash
npm i vue-reuse-template
```
## Motivation
It's common to have the need to reuse some part of the template in Vue. For example:
```html
```
We'd like to reuse our code as much as possible. So normally we might need to extract those duplicated parts into a component. However, in a separated component you lose the ability to access the local bindings. Defining props and emits for them can be tedious sometime.
So this library is made to provide a way for defining and reusing templates inside the component scope.
## Usage
In the previous example, we could refactor it to:
```html
import { createReusableTemplate } from 'vue-reuse-template'
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
```
- `` will register the template and renders nothing.
- `` will render the template provided by ``.
- `` must be used before ``.
> **Note**: It's recommanded to extract as separate components whenever possible. Abusing this library might lead to bad practices for your codebase.
### Passing Data
You can also pass data to the template using slots:
- Use `v-slot="..."` to access the data on ``
- Directly bind the data on `` to pass them to the template
```html
import { createReusableTemplate} from 'vue-reuse-template'
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
{{ data }} passed from usage
```
### TypeScript Support
`createReusableTemplate` accepts a generic type to provide type support for the data passed to the template:
```html
import { createReusableTemplate } from 'vue-reuse-template'
// Comes with pair of `DefineTemplate` and `ReuseTemplate`
const [DefineFoo, ReuseFoo] = createReusableTemplate<{ msg: string }>()
// You can create multiple reusable templates
const [DefineBar, ReuseBar] = createReusableTemplate<{ items: string[] }>()
Hello {{ msg.toUpperCase() }}
```
Optionally, if you are not a fan of array destructuring, the following usage is also legal:
```html
import { createReusableTemplate } from 'vue-reuse-template'
const TemplateFoo = createReusableTemplate<{ msg: string }>()
Hello {{ msg.toUpperCase() }}
```
### Passing Slots
It's also possible to pass slots back from ``. You can access the slots on `` from `$slots`:
```html
import { createReusableTemplate } from 'vue-reuse-template'
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
Some content
Another content
```
## Performance
This library has very little overhead. You don't normally need to worry about its performance impact.
## References
Existing Vue discussions/issues about reusing template:
- [Discussion on Reusing Templates](https://github.com/vuejs/core/discussions/6898)
Existing Solutions:
- [Vue Macros - `namedTemplate`](https://vue-macros.sxzz.moe/features/named-template.html)
- [`unplugin-vue-reuse-template`](https://github.com/liulinboyi/unplugin-vue-reuse-template)
## Sponsors
## License
[MIT](./LICENSE) License © 2022 [Anthony Fu](https://github.com/antfu)