Note

This documentation describes the v-neos-event Vue directive for native UI views. For Xml templates see event.

v-neos-event

Calls a handler on events that are not DOM events on the node itself. Native events such as click or mouseenter need no directive: use Vue's own @click and @mouseenter listeners.

Import

import { NeosEvent } from '@neos/design-system'

Syntax

<div v-neos-event:[arg]="handler" />

Arguments & Values

Argument	Value type	Description
`resize`	`(args: ResizeEventArgs) => void`	Called on every layout change with the size actually rendered for the element, in `size`

Notes

The element is observed with a ResizeObserver, so the handler is called once the layout has been computed, then on every layout change.
The reported size is the element's border box: padding and border are included, margin is not.
A size identical to the previous one is never reported twice, which also prevents a handler feeding the size back into the layout from looping indefinitely.

Usage Examples

React to the rendered size of a container

<div v-neos-event:resize="onContainerResized">
  <Datagrid />
</div>

import type { ResizeEventArgs } from '@neos/shared'

function onContainerResized(args: ResizeEventArgs) {
  showSideBySide.value = args.size.width > 900
}

Table of Contents