# vue-fragment

> fragment component for vuejs

Latest version **1.6.0** (published 2022-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-fragment
pnpm add vue-fragment
yarn add vue-fragment
bun add vue-fragment
```

## 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 | 1.6.0 |
| Published | 2022-05-31 |
| First published | 2018-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 667 |
| Author | Julien Barbay |
| Maintainers | thunberg087 |
| Keywords | vuejs, fragment, component |

## Links

- npm: https://www.npmjs.com/package/vue-fragment
- Repository: https://github.com/Thunberg087/vue-fragment
- Homepage: https://github.com/Thunberg087/vue-fragment#readme
- Issues: https://github.com/Thunberg087/vue-fragment/issues
- npm.io page: https://npm.io/package/vue-fragment

## Recent versions

- 1.6.0 (latest) — 2022-05-31
- 1.5.3 — 2022-05-31
- 1.5.2 — 2021-02-24
- 1.5.1 — 2019-04-12
- 1.5.0 — 2018-12-05
- 1.2.2 — 2018-11-08
- 1.2.1 — 2018-11-08
- 1.2.0 — 2018-11-08
- 1.1.0 — 2018-10-24
- 1.0.2 — 2018-10-24
- 1.0.1 — 2018-10-24
- 1.0.0 — 2018-10-24
- 0.0.1 — 2018-01-08

## README

# vue-fragment [![npm version](https://badge.fury.io/js/vue-fragment.svg)](https://badge.fury.io/js/vue-fragment)


---


## what
a very candide fragment component for Vue.js


## why
If you arrived here, I think you searched hard and you know why you're here.

For others, fragments are basically _root-less_ components. They come useful in many situations where you don't want to pollute the DOM with a useless container, or you want to return many elements at once.

## how
It's impossible to use functional components or slots, since Vue.js vDOM diffing has a "you should return one root element" limitation… Instead, I'm using an (internal) directive which will dump all the children of the fragment root node in its place. Since directives can manipulate DOM, we can act after rendering and bypass Vue limitation.

The component is called `Fragment` so you won't have to change much code when Vue3 native fragments arrive. That said, **I'm not a core developer of Vue.js, and I don't have any view of their implementation. I only know what fragments are and how they should work, and did my best to reproduce it ; so it _should_ be fine.**

## use
-  download the package `npm i -s vue-fragment`

From here, you can:

- Plugin:
    ```js
    import Fragment from 'vue-fragment'
    Vue.use(Fragment.Plugin)

    // or

    import { Plugin } from 'vue-fragment'
    Vue.use(Plugin)

    // …

    export const MyComponent {
      template: '
      <fragment>
        <input type="text" v-model="message">
        <span>{{ message }}</span>
      </fragment>
      ',
      data() { return { message: 'hello world }}
    }
    ```

- Component:
    ```js
    import { Fragment } from 'vue-fragment'

    export const MyComponent {
      components: { Fragment },
      template: '
      <fragment>
        <input type="text" v-model="message">
        <span>{{ message }}</span>
      </fragment>
      ',
      data() { return { message: 'hello world }}
    }
    ```

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