The Language Component displays a list of available languages and provides access to the currently selected language.

It is typically used for language switchers in navigation bars, headers, or footers.

The component automatically generates URLs for the translated version of the current page, making it ideal for multilingual websites.

Component Options

All options are added as HTML attributes using the data-v-* syntax.

Option Attribute Description Default
start data-v-start Starting offset for pagination 1
limit data-v-limit Number of languages to display 1000
status data-v-status 1 = show only active languages, 0 = show all 1
site_only data-v-site_only Show only languages enabled for the current site true
default data-v-default Preselect a specific language; if not set, uses site default null

These options allow you to control which languages appear and how they are filtered.

Component Properties

Current Language Properties

The currently selected language is exposed through data-v-language-info-* attributes:

Property Attribute Description
name data-v-language-name Language name (e.g., English)
slug data-v-language-slug Language slug (e.g., en)
code data-v-language-code Language code (e.g., en_US)
language_id data-v-language-language_id Internal language ID
img data-v-language-img Language flag/icon

These are useful for showing the currently active language in a dropdown or header.

Available Languages (Repeatable)

Languages are listed inside a data-v-language container.
Each language exposes:

Property Attribute Description
name data-v-language-name Language name
slug data-v-language-slug URL slug
code data-v-language-code Language code
language_id data-v-language-language_id Internal ID
img data-v-language-img Language flag/icon
sort_order data-v-language-sort_order Display order
status data-v-language-status 1 = active, 0 = inactive
default data-v-language-default 1 if default language
url data-v-language-url URL to the translated version of the current page

The url property is especially important:

  • On category/product/post pages, it links to the translated version of that item
  • On pages without translations, it links to the language homepage

Example Usage

<div class="dropdown" data-v-component-language>
	<form method="post" enctype="multipart/form-data" id="form-language">

		<a class="dropdown-toggle nav-link" 
		   data-bs-toggle="dropdown" 
		   role="button" 
		   title="Language" 
		   aria-expanded="false">

			<span data-v-language-info-name></span>
		</a>

		<div class="dropdown-menu">

			<div data-v-language>
				<button class="dropdown-item" 
				        type="submit" 
				        name="language" 
				        data-v-language-code>

					<img loading="lazy" 
					     class="me-1" 
					     data-v-language-img>

					<span data-v-language-name></span>
				</button>
			</div>

		</div>
	</form>
</div>

This example creates a dropdown language selector that:

  • Shows the current language
  • Lists all available languages
  • Displays flags and names
  • Submits the selected language code
  • Automatically links to the translated version of the current page