Host Components

What is a host component?

A host component is a regular Vue component that lives in the host application and is registered in createProvider({ ... }).

Remote applications can render only components that the host explicitly exposes by name. This is the main control boundary of @omnicajs/vue-remote.

Why this matters

• The host controls the allowed UI surface.
• Remote code cannot mount arbitrary local components.
• Shared UI contracts become explicit (names, props, events, slots).

Data contract requirements

All props sent to host components and all event payloads emitted back to remote should be safely serializable over RPC/postMessage.

Use:

• Scalars: string, number, boolean, null.
• Arrays of serializable values.
• Plain objects (POJO) with serializable nested values.
• Combinations of the three above.

Avoid in props and event payloads:

• Functions.
• Class instances.
• DOM nodes.
• Symbols.
• Any custom non-serializable runtime objects.

Example: host button

import { defineComponent, h } from 'vue'

export default defineComponent({
  name: 'VButton',
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    variant: {
      type: String as () => 'primary' | 'secondary',
      default: 'primary',
    },
  },
  emits: ['click'],
  setup (props, { emit, slots, attrs }) {
    return () => h('button', {
      ...attrs,
      disabled: props.disabled,
      class: ['btn', `btn-${props.variant}`],
      onClick: () => emit('click'),
    }, slots.default?.())
  },
})

Example: host input

import { defineComponent, h } from 'vue'

export default defineComponent({
  name: 'VInput',
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
  },
  emits: ['update:value'],
  setup (props, { emit, attrs }) {
    return () => h('input', {
      ...attrs,
      value: props.value,
      placeholder: props.placeholder,
      onInput: (event: Event) => emit(
        'update:value',
        (event.target as HTMLInputElement).value
      ),
    })
  },
})

Provider registration

import { createProvider } from '@omnicajs/vue-remote/host'

import VButton from './VButton'
import VInput from './VInput'

export const provider = createProvider({
  VButton,
  VInput,
})