Utilities for manipulating Vue 3 VNodes.

• Docs: https://skirtles-code.github.io/vue-vnode-utils/
• GitHub: https://github.com/skirtles-code/vue-vnode-utils/
• Example: SFC Playground

Installation with npm/yarn/pnpm:

npm add @skirtle/vue-vnode-utils

ES module usage:

import { addProps } from '@skirtle/vue-vnode-utils'

<script src="https://unpkg.com/@skirtle/vue-vnode-utils/dist/vue-vnode-utils.global.dev.js"></script>

This should be placed after the <script> tag for Vue itself, as it needs the global Vue to be available.

The functions are then exposed via the global VueVNodeUtils:

const { addProps } = VueVNodeUtils

The URL above will include the development build, which is not minified and includes some warning messages. In production the exact version should be pinned and .prod should be used instead of .dev.

@skirtle/vue-vnode-utils imports from vue, so it needs an import map to be configured to use ES modules directly in the browser.

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
    "@skirtle/vue-vnode-utils": "https://unpkg.com/@skirtle/vue-vnode-utils/dist/vue-vnode-utils.esm-browser.dev.js"
  }
}
</script>
<script type="module">
import { addProps } from '@skirtle/vue-vnode-utils'
// ...
</script>

As with the global build, this should be changed to an exact version and switched to .prod in production.

Some browsers do not yet have full support for import maps.

MIT

Copyright © 2022-2025, skirtle