How to create a language switcher component in Quasar

In today's globalized world, building websites and applications that resonate with a diverse audience is paramount. One essential feature in achieving this inclusivity is the implementation of a language switcher. A language switcher empowers users to seamlessly switch between different languages on your website or application, making it more accessible and user-friendly for individuals who speak diverse languages.

In this tutorial, we will guide you through the process of creating a language switcher component in Quasar, a powerful framework designed to simplify internationalization (i18n) and enable dynamic language changes within your application. By the end of this tutorial, you will have a functional language switcher that enhances both the accessibility and user experience of your Quasar project.

Setup vue-i18n

If you didn't enable i18n during the yarn create quasar or npm init quasar wizard, don't worry. You can set it up manually using the following steps:

Skip the following steps if you've already enabled i18n during the project creation.

1. Add the vue-i18n dependency to your application.

$ yarn add vue-i18n@next
// or:
$ npm install vue-i18n@next

2. Create i18n.js boot file.

$ quasar new boot i18n

append the following code snippets to the previously created boot file.

import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export default ({ app }) => {
  // Create I18n instance
  const i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })

  // Tell app to use the I18n instance
  app.use(i18n)
}

3. Set up a directory src/i18n in your application to store language definitions for the supported languages. Pay attention to the import messages from 'src/i18n' in step 2. This is where you'll write the content that will be imported.

4. Create an en-US directory within src/i18n. Inside this directory, create an index.js file and populate it with the translatable strings. Repeat this process for other languages and ensure that you translate the content accordingly.

an example of src/i18n/en-US/index.js content

export default {
  failed: "Action failed",
  success: "Action was successful",
};

4. Reference the boot file that we created in step 2 in your quasar.config.js specifically in the boot section.

// quasar.config file
return {
  boot: [
    // ...
    'i18n'
  ],

  // ...
}

Now, you're all set to start using it in your pages.

Create LanguageSwitcher component

To showcase the list of supported languages on your website or app, we'll make use of Quasar's q-select component to display the available options. Let's assume the application supports English, French, and Spanish.

<script setup>
  // Import the useI18n function from the Vue-i18n library
  import { useI18n } from "vue-i18n";

  // Use the global Vue-i18n instance and retrieve the current locale
  const { locale } = useI18n({ useScope: "global" });

  // Define an array of language options with their values, labels, and flag icons
  const languages = [
    { value: "en-US", label: "English", flag: "🇺🇸" },
    { value: "fr", label: "Français", flag: "🇫🇷" },
    { value: "es", label: "Español", flag: "🇪🇦" },
  ];
</script>

<template>
  <!-- Create a language switcher dropdown using Quasar's q-select component -->
  <q-select
    v-model="locale"  // Bind the selected locale to the 'locale' variable
    :options="languages"  // Use the 'languages' array as options
    :option-label="(opt) => (Object(opt) === opt ? opt.flag + ' ' + opt.label : '- Null -')"
    emit-value
    borderless
    dense
    map-options
    options-dense
    style="min-width: 160px"
  >
    <!-- Customize how each option is displayed -->
    <template v-slot:option="scope">
      <q-item v-bind="scope.itemProps">
        <q-item-section avatar>
          <!-- Display the flag icon associated with the language -->
          <q-icon :name="scope.opt.flag" />
        </q-item-section>
        <q-item-section>
          <!-- Display the label for the language -->
          <q-item-label>{{ scope.opt.label }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

Add the Language Switcher to Your Layout

In your layout component (e.g., src/layouts/MainLayout.vue), import and add the LanguageSwitcher component.

<script setup>
import LanguageSwitcher from "src/components/LanguageSwitcher.vue";
</script>

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header class="bg-blue-grey-2">
      <q-toolbar>
        <div>
          <LanguageSwitcher />
        </div>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

Test Your Language Switcher

Now, when you run your Quasar app, you should see the language switcher in your layout, allowing you to change the language dynamically.

That's it! You've created a language switcher in Quasar using the vue-i18n plugin. Users can now switch between languages in your application easily.