https://github.com/elonehoo/vnode-util

Utilities for manipulating Vue 3 VNodes
https://github.com/elonehoo/vnode-util

util vnode vue

Last synced: 2 months ago
JSON representation

Utilities for manipulating Vue 3 VNodes

• Host: GitHub
• URL: https://github.com/elonehoo/vnode-util
• Owner: elonehoo
• License: mit
• Created: 2023-01-08T13:46:48.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-15T03:27:56.000Z (9 months ago)
• Last Synced: 2024-04-17T06:53:34.924Z (9 months ago)
• Topics: util, vnode, vue
• Language: TypeScript
• Homepage: https://vnode-util.elonehoo.me
• Size: 1.14 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  





  vnode-util





Utilities for manipulating Vue 3 VNodes





  





 Documentation | Getting Started | Playground









## Features

- Walk slot VNodes without worrying about fragments created by v-for.

- Add extra props, CSS classes, events and refs to slot contents.

- Remove existing nodes, wrap them with other nodes, or insert new nodes into the VNode tree.

- The library is already small, but the helpers are also highly tree-shakable, reducing the size even further.

- A fully typed API, building on the core Vue types.

- But if you really have to manipulate VNodes, a library to smooth over the edge cases makes it less likely to go wrong.

```vue

import { h } from 'vue'

import { addProps, betweenChildren, isText, replaceChildren } from 'vnode-util'

export default {

  setup(_, { slots }) {

    return () => {

      let children = slots.default?.() ?? []

      // Wrap text nodes in a `<div>`

      children = replaceChildren(children, (vnode) => {

        if (isText(vnode))

          return h('div', vnode)

      })

      // Add the 'my-child' class to all children

      children = addProps(children, () => {

        return {

          class: 'my-child'

        }

      })

      // Insert the text 'then' between children

      children = betweenChildren(children, () => 'then')

      return h('div', children)

    }

  }

}

.my-child {

  border: 1px solid #000;

  margin: 5px 0;

  max-width: 200px;

  padding: 5px;

}

```

## License

[MIT](./LICENSE) License © 2023-Present [Elone Hoo](https://github.com/elonehoo)