With meta 0.3+

There are alternative versions of the iterator functions, with added support for accessing extra metadata for the current node.

Currently, this metadata just includes the iteration index and length.

To use this metadata you'll need to import the functions from @skirtle/vue-vnode-utils/with-meta rather than @skirtle/vue-vnode-utils.

Accessing meta from callbacks

The meta is passed in an object as the final argument of the callback for each iterator.

The length property is a number and should be equivalent to calling countChildren(). It will use the same iteration options as the iterator, so if you're skipping nodes then those nodes won't be included in the length. For most iterators, the length is the number of times the callback will be called during the iteration.

The index is zero-based, counting up to length - 1.

The length is calculated lazily, so if it isn't accessed the nodes won't be counted.

betweenChildren() behaves a little differently. The index will still start at zero, but it will only count up to length - 2. The length will still reflect the number of nodes, like it would for the other iterators, but that won't match the number of calls to the callback.

Example

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

export default function AddStripes(_, { slots }) {
  const children = addProps(slots.default(), (vnode, { index, length }) => {
    return {
      class: [
        index % 2 ? 'odd' : 'even',
        {
          first: index === 0,
          last: index === length - 1
        }
      ]
    }
  })

  return h('div', children)
}

See it on the SFC Playground: Composition API | Options API

Accessing the `with-meta` iterators

Metadata isn't included in the default iterators, to avoid the added overhead. You'll need to use alternative versions of the iterators to get the metadata.

With a bundler

If you're using a bundler then you just need to change @skirtle/vue-vnode-utils to @skirtle/vue-vnode-utils/with-meta in your imports to get access to the metadata:

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

All exports from @skirtle/vue-vnode-utils are re-exported by @skirtle/vue-vnode-utils/with-meta, even those that don't include meta. You can also mix @skirtle/vue-vnode-utils and @skirtle/vue-vnode-utils/with-meta and functions will be tree-shaken across the two packages.

CDN - global build

To use meta with a global build, add with-meta to the path:

html

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

The global variable is called VueVNodeUtils, the same as with the normal build. You wouldn't load both in the same project.

CDN - ES module build

Similar to the global build, you need to add with-meta to the path:

html

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

The with-meta module includes a copy of everything it needs, you don't need to include @skirtle/vue-vnode-utils in the import map.

The package name is usually arbitrary, though using @skirtle/vue-vnode-utils/with-meta is recommended unless you have a good reason to use an alternative.

With meta 0.3+ ​

Accessing meta from callbacks ​

Example ​

Accessing the with-meta iterators ​

With a bundler ​

CDN - global build ​