FormLanguages

Renders a language selector for translatable elements using FormLanguage components.

Basic Usage

<FormLanguages> component can be used in <Vueform> component's #empty slot:

vue
<template>
  <Vueform>
    <template #empty>
      <FormLanguages>
        <FormLanguage
          language="English"
          code="en"
        />
        <FormLanguage
          language="Chinese"
          code="zh"
        />
      </FormLanguages>

      <FormElements>
        <TTextElement
          name="title"
          label="Title"
        />
        <TEditorElement
          name="article"
          placeholder="Article content..."
        />
      </FormElements>
    </template>
  </Vueform>
</template>

Options

Find below the list of options that can use to configure FormLanguages component. Options can be passed to the component via props.

view

  • Type: string
vue
<FormLanguages view="alt" ... />

The name of the view to be used for the component and child components (FormLanguage). If undefined the default view will be used.

Learn more about views here.

Properties

All the data, computed and inject properties of the component.

language

  • Type: string
  • Group: computed

The language code of the currently selected language (2 letters).

languages

  • Type: object
  • Group: computed

The available languages.

Size

  • Type: string
  • Group: inject

The size of the component.

View

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template

  • Type: object
  • Group: computed

The component's template.

classes

  • Type: object
  • Group: computed

The component's classes.

theme

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$

  • Type: Vueform
  • Group: inject

The root form's component.

Methods

The methods of the component.

select

  • Arguments:
    • {string} code* - the language code to be selected
  • Returns: void

Selects a language.

👋 Hire Vueform team for form customizations and developmentLearn more