# Single file components

# Basic Usage

If you are building Kdu component or Kdu application using single file components, you can manage the locale messages i18n custom block.

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select k-model="locale">
      <option>en</option>
      <option>ja</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    this.$i18n.locale = 'en';
    return { locale: 'en' }
  },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>

# Multiple custom blocks

You can use locale messages with multiple i18n custom blocks.

<i18n src="./common/locales.json"></i18n>
<i18n>
  {
    "en": {
      "hello": "hello world!"
    },
    "ja": {
      "hello": "こんにちは、世界！"
    }
  }
</i18n>

In the above, first custom block load the common locale message with src attribute, second custom block load the locale message that is defined only at single file component. These locale messages will be merged as locale message of component.

In this way, multiple custom blocks useful when want to be used as module.

# Scoped style

When using Kdu-i18n with scoped style, it's important to remember to use a deep selector (opens new window) for styling an element inside the translation string. For example:

Translation contains only text (Work without deep selector)

...
<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界"
  }
}
</i18n>
...
<template>
  <div class="parent">
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>
...
<!-- Will work -->
<style>
.parent p {
  color: #42b883;
}
</style>

Translation with HTML element (Must use deep selector)

...
<i18n>
{
  "en": {
    "hello": "hello<span>world!</span>"
  },
  "ja": {
    "hello": "こんにちは、<span>世界！</span>"
  }
}
</i18n>
...
<template>
  <div class="parent">
    <p k-html="$t('hello')"></p>
  </div>
</template>
...
<!-- Won't work -->
<style>
.parent p {
  color: #03a9f4;
}

.parent p span{
  color: red;
}
</style>

<!-- Will work -->
<style>
.parent p {
  color: #03a9f4;
}

.parent p >>> span{
  color: red;
}
</style>

# Custom blocks in functional component

If the single file components have the template using a functional component, and you had been defined i18n custom blocks, note you cannot localize using locale messages.

For example, the following code cannot localize with the locale message of i18n custom block.

<i18n>
{
  "en": {
    "hello": "hello world"
  },
  "ja": {
    "hello": "こんにちは、世界"
  }
}
</i18n>

<template functional>
  <!-- 'hello' of locale messages of parent instance -->
  <p>{{ parent.$t('hello') }}</p>
</template>