VfLanguages

Basic

VfLanguages renders the language switcher in a multilingual form. Override the languages slot on VfForm to render VfLanguages with custom props or alongside additional content.

Title

EnglishFrançais

Editing language: English

Body

EnglishFrançais

Editing language: English

<VfForm
  multilingual
  :languages="{ en_US: 'English', fr_FR: 'Français' }"
>
  <template
    #languages="{ languages, language, invalidLanguages, select }"
  >
    <VfLanguages
      :languages="languages"
      :language="language"
      :invalid-languages="invalidLanguages"
      @select="select"
    />
  </template>
  <VfText name="title" label="Title" translate />
  <VfTextarea name="body" label="Body" translate />
</VfForm>

<template>
  <VfForm
    multilingual
    :languages="{ en_US: 'English', fr_FR: 'Français' }"
  >
    <template
      #languages="{ languages, language, invalidLanguages, select }"
    >
      <VfLanguages
        :languages="languages"
        :language="language"
        :invalid-languages="invalidLanguages"
        @select="select"
      />
    </template>
    <VfText name="title" label="Title" translate />
    <VfTextarea name="body" label="Body" translate />
  </VfForm>
</template>

<script setup lang="ts">
import { defineSchema, defineSlot, useForm } from '@vueform/ui'
import { h, resolveComponent } from 'vue'

const schema = defineSchema({
  title: { type: 'text', label: 'Title', translate: true },
  body: { type: 'textarea', label: 'Body', translate: true },
})

const [MyForm] = useForm({
  schema,
  multilingual: true,
  languages: { en_US: 'English', fr_FR: 'Français' },
  slots: {
    languages: defineSlot('VfForm.languages', {
      props: [
        'languages',
        'language',
        'invalidLanguages',
        'select',
      ],
      setup: (props) => () => {
        const VfLanguages = resolveComponent('VfLanguages')

        return h(VfLanguages, {
          languages: props.languages,
          language: props.language,
          invalidLanguages: props.invalidLanguages,
          onSelect: props.select,
        })
      },
    }),
  },
})
</script>

<template>
  <MyForm />
</template>

Props

Configure the component's behavior and appearance with these props.

Component

Prop	Default	Description
invalidLanguages	—	Set of language codes that currently have validation errors.
select	—	Required. Select a language.

I18n

Prop	Default	Description
language	—	Required. The currently active language code.
languages	—	Required. The available languages as a map of language codes to display names.

Customization

Prop	Default	Description
parts	—	Custom DOM attribute overrides for the component's structural parts.
class	—	CSS classes to apply to the component's root element.
classes	—	Custom CSS class overrides for the component's structural parts.
reclass	—	CSS class overrides that replace (rather than merge with) default classes.
slots	—	Custom Vue components to use for named slots. Every component resolves it through the standard outlets pipeline (see useOutlets).
presets	—	Named configuration presets to apply to the component.
template	—	A custom Vue component to use as the template instead of the default.
component	—	A custom Vue component to render in the component's default slot.

Context

Reactive properties and methods accessible on the component's Context object.

General

Name	Description
props	The resolved component props with defaults applied.

Layout

Name	Description
classes	The resolved CSS class map for the component.
parts	The resolved DOM attribute overrides for internal elements.

Events

Name	Description
fire()	Fires an event synchronously, invoking before, main, and after listeners in order.
fireAsync()	Fires an event asynchronously, awaiting each callback and short-circuiting when any returns false.
on()	Subscribes a callback to a specific event.
off()	Removes a previously registered event callback.
onBefore()	Registers a callback that runs before the main event listeners.
onAfter()	Registers a callback that runs after the main event listeners.

Handlers

Name	Description
handleSelect()	Handles language selection by firing the select event.

Events

Events emitted by the component. See Events for details.

Name	Params	Description
beforeMount	context$	Emitted before the component is mounted.
mounted	context$	Emitted after the component is mounted.
beforeUnmount	context$	Emitted before the component is unmounted.
unmounted	context$	Emitted after the component is unmounted.
updated	context$	Emitted after the component is updated.

Slots

Named Slots for replacing parts of the component's rendering.

Name	Scope	Description
template	context	Slot that replaces the entire component rendering. Receives the full component context as a single context prop.
default	language languages value label	Slot that replaces each individual language option rendering.

Parts

DOM attribute overrides targeting internal elements. See Parts for details.

Example

root

The root language selector element.

Element	<div>
Classes	.vf-languages

list

The language list element.

Element	<ul>
Classes	.vf-languages-wrapper

wrapper

Each language wrapper. Receives whether this option is currently selected and whether this language has validation errors.

Element	<li>
Classes	.vf-language-wrapper
Bindings	data-selected data-invalid

language

The language button element.

Element	<button>
Classes	.vf-language

Tokens

All the CSS variables that control this component's appearance with default values in the default theme. See Themes & Tokens for details.

:root {
  /**
   * Component tokens
   * -------------------------------------------------------------------------- */
  --vf-language-padding: 0 1rem 0.5rem 1rem;
  --vf-languages-gutter: var(--vf-gutter);
  --vf-languages-margin: 0 0 var(--vf-gutter) 0;

  --vf-language-color: inherit;
  --vf-language-color-danger: var(--vf-red);
  --vf-language-color-selected: inherit;
  --vf-language-color-selected-danger: var(--vf-red);

  --vf-language-bg: transparent;
  --vf-language-bg-danger: transparent;
  --vf-language-bg-selected: transparent;
  --vf-language-bg-selected-danger: transparent;

  --vf-language-border-color: transparent;
  --vf-language-border-color-danger: transparent;
  --vf-language-border-color-selected: var(--vf-brand);
  --vf-language-border-color-selected-danger: var(--vf-red);
  --vf-language-border-width: 0 0 2px 0;
  --vf-language-radius: 0px;

  --vf-languages-font-size: 1rem;
}

{
  /**
   * Component tokens
   * -------------------------------------------------------------------------- */
  languagePadding: '0 1rem 0.5rem 1rem',
  languagesGutter: '$gutter',
  languagesMargin: '0 0 $gutter 0',

  languageColor: 'inherit',
  languageColorDanger: '$red',
  languageColorSelected: 'inherit',
  languageColorSelectedDanger: '$red',

  languageBg: 'transparent',
  languageBgDanger: 'transparent',
  languageBgSelected: 'transparent',
  languageBgSelectedDanger: 'transparent',

  languageBorderColor: 'transparent',
  languageBorderColorDanger: 'transparent',
  languageBorderColorSelected: '$brand',
  languageBorderColorSelectedDanger: '$red',
  languageBorderWidth: '0 0 2px 0',
  languageRadius: '0px',

  languagesFontSize: '1rem',
}