Note

This documentation describes the Context Vue component for native UI views for Xml templates see context.

Context

A renderless ViewModel provider. Wraps a subtree and injects a specific ViewModel instance, allowing child components to use a different ViewModel than the one provided by the parent.

Import

import { Context } from '@neos/app'

Props

Prop	Type	Default	Description
viewModel	ViewModel<Model>	—	Required. The ViewModel instance to inject into the slot's subtree

Slots

Slot	Description
default	Child components that will receive the provided ViewModel via useViewModel()

Usage Examples

Render a sub-ViewModel's form fields

<Context :view-model="orderViewModel">
  <VerticalLayout space="small">
    <StringFormField property-name="orderNumber" />
    <DateFormField property-name="orderDate" />
  </VerticalLayout>
</Context>

Two independent ViewModel sections in the same view

<HorizontalLayout space="medium">
  <Context :view-model="leftViewModel">
    <VerticalLayout space="small">
      <Toolbar :save="true" :add="false" />
      <Datagrid />
    </VerticalLayout>
  </Context>
  <Context :view-model="rightViewModel">
    <VerticalLayout space="small">
      <Toolbar :save="true" :add="false" />
      <Datagrid />
    </VerticalLayout>
  </Context>
</HorizontalLayout>