Nonstop Progressive Marxism
    Wondering what’s next for npm?Check out our public roadmap! »

    @grainrigi/vue-fragment
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    vue-fragment npm version


    Disclaimer

    To all enthousiasts and users of this package, first, thank you. I'm quite busy since i've published 1.5.0 and totally let go of this repo. I know it sucks, but we're all busy from time to time, right? If someone is interested in taking lead on this, please open an issue or contact me. I'd be more than happy if someone would feel helping until Vue 3 comes up.

    Cheers to all, J.


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

    Install

    npm i @grainrigi/vue-fragment

    DownloadsWeekly Downloads

    19

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar