Socket
Socket
Sign inDemoInstall

vue-fragment

Package Overview
Dependencies
10
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-fragment

fragment component for vuejs


Version published
Maintainers
1
Created

Readme

Source

vue-fragment npm version


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:

    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:

    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 }}
    }
    

Keywords

FAQs

Last updated on 31 May 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc