Localization with Framework7 and Vue · vanrossum.dev    

       vanrossum.dev 

 Article

Localization with Framework7 and Vue
====================================

 ![](https://vanrossum.dev/images/jeffrey-portrait.webp) By Jeffrey van Rossum

  vanrossum.dev  

  [      vanrossum.dev ](https://vanrossum.dev)                      

  [ ← Writing ](https://vanrossum.dev/posts)   [ ← Writing ](https://vanrossum.dev/posts) [ Install Vue I18n ](#install-vue-i18n) [ Modify your app.js ](#modify-your-appjs) [ Using the translations in your components ](#using-the-translations-in-your-components) [ Separate file for translations ](#separate-file-for-translations) 

While creating an app with Framework7, I wanted to be able to localize strings to support other languages. I found the Vue I18n package, and it is actually quite easy to apply to a Framework7 Vue project.

Below you’ll find the steps to achieve this. I’m assuming you’ve already created a Vue Framework7 app. If you haven’t, you can follow the installation instructions.

Install Vue I18n
----------------

From the terminal (from your app folder), run the following command to install vue-i18n.

`npm install vue-i18n`

Modify your app.js
------------------

Next, in `src/js/app.js`, make sure to import vue-i18n like this, just after the vue-import.

`import VueI18n from 'vue-i18n';`

Then directly after that, you add this:

`Vue.use(VueI18n);`

Next, we need to create an instance of VueI18n. We give this instance the translations and the current locale. First, let’s make a quick object that contains our translations.

```javascript
const messages = {
  en: {
    message: {
      hello: 'Mark Knopfler is awesome'
    }
  },
  nl: {
    message: {
      hello: 'Mark Knopfler is te gek!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'nl', // set locale
  messages, // set locale messages
});

```

At the bottom of your app.js, you’ll find the main Vue instance of your app. We need to add i18n to this instance, like this:

```
new Vue({
    el: '#app',
    render: (h) => h(App),
    components: {
        app: App
    },
    i18n
});

```

Using the translations in your components
-----------------------------------------

Now, within your components (our pages , that are components), you can retrieve your translations like this:

```
{{ $t("message.hello") }}

```

Separate file for translations
------------------------------

As your messages object gets bigger, you might want to put them in a separate file. You could do this by, for example, creating a messages.js file in your js-folder. That file would look something like this:

```javascript
const messages = {
  en: {
    message: {
      hello: 'Mark Knopfler is awesome'
    }
  },
  nl: {
    message: {
      hello: 'Mark Knopfler is te gek!'
    }
  }
};

export { messages };

```

Then, within your app.js, you can import the messages like this (before the VueI18n instance):

`import { messages } from './messages.js'`

I hope this helps anyone!

  ![](https://vanrossum.dev/images/jeffrey-portrait.webp) Jeffrey van Rossum [@jeffreyrossum](https://x.com/jeffreyrossum) 

 share [𝕏](https://twitter.com/intent/tweet?url=https%3A%2F%2Fvanrossum.dev%2Fposts%2Flocalization-with-framework7-and-vue&text=Localization+with+Framework7+and+Vue) [WhatsApp](https://wa.me/?text=Localization+with+Framework7+and+Vue+https%3A%2F%2Fvanrossum.dev%2Fposts%2Flocalization-with-framework7-and-vue) [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fvanrossum.dev%2Fposts%2Flocalization-with-framework7-and-vue) 

   © 2026 Jeffrey van Rossum 

  vanrossum.dev vanrossum.dev