i18n with SFC

Clareon

Dear all,

the link (https://github.com/quasarframework/quasar-framework.org/pull/401) from a47ae here in the forum is out of order. It brings up a page where I should click to (https://kazupon.github.io/vue-i18n/en/sfc.html) to read the instructions but there ist nothing (http 404).

I tried to get single file components with <i18n> blocks working, but I failed. I tried with @kazupon/vue-i18n-loader and with @intlify/vue-i18n-loader. Neither worked. I allways get an error when compiling with “quaser dev” comand. Here is the error message.

error  in ./src/layouts/MainLayout.vue?vue&type=custom&index=0&blockType=i18n

Module parse failed: Unexpected token (65:6)
File was processed with these loaders:
* ./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| {
>   "de": {
|     "MLTit": "Mein Titel"
|   },

@ ./src/layouts/MainLayout.vue?vue&type=custom&index=0&blockType=i18n 1:0-217 1:233-236 1:238-452 1:238-452
@ ./src/layouts/MainLayout.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./.quasar/app.js
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

In the file quasar.config.js I have changed the extendWebpack to:

extendWebpack (cfg) {
       cfg.module.rules.push({
         enforce: 'pre',
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /node_modules/
       }, {
         resourceQuery: /blockTyp=i18n/,
         type: 'javascript/auto',
         use: [
           { loader: '@kazupon/vue-i18n-loader' },
           { loader: 'json-loader' }
         ]
       })
     }

The loaders vue-i18n-loader and json-loader are installed. I tried with json-loader and with yaml-loader or without these loaders with no effect. I also tried with @kazupon and with @intlify for the vue-i18n-loader.

What is going wrong?

And it would be nice, if quasar cli would do all things related to i18n including single file components.

Thank you.

Clareon

Hallo again,
one note to the above: I recently installed quasar and node on my computer. I installed nvm (node version manager) too, I have both node v12 and v14. I tested quasar i18n with v12, because quasar documentation said so. I created the new test project with quasar CLI and with option i18n. The i18n is running and works ok, if I only use the translation texts from directory i18n and the sub directories en-us and my new de. Switching language at run time works fine. The only thing ist, that the translations in the vue single file components do not work (see my question from yesterday). I guess something with webpack and the i18n-loaders ist not ok. Has anyone an idea?
Thnak you.

dobbel

@Clareon

maybe this will help:
https://github.com/NafaaBout/q-internationalization
https://medium.com/quasar-framework/adding-full-i18n-to-quasar-150da2d5bba4
https://medium.com/@nafaabout/app-internationalization-with-quasar-framework-bfc222e6247c

( use of i18n component in ‘vue single file’)
https://codesandbox.io/s/0b5n9?file=/src/pages/Index.vue

Clareon

Thank you, dobbel.
The examples uses SFC but not the <i18n>-block in the SFC. I do the same and this is working great.
My question is about using <i18n>-blocks in a SFC to write the translations related to the SFC. In the Internet I found that I should add some webpack rules for extracting the <i18n>-blocks from the vue files. Above I showed what I did in the quasar.conf.js. But I do know nothing about webpack.

ssuess

I think you may need to separate your ruleblock above into TWO. The i18n loader block may need to stand alone. The following works for me:

       cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }),
        cfg.module.rules.push({
          resourceQuery: /blockType=i18n/,
          type: 'javascript/auto',
          use: [
            {loader: '@kazupon/vue-i18n-loader'}
          ]
        })

and then inside my vue file I do the following:

<i18n src="../i18n-files/componentName.json"></i18n>

Clareon

Thank you, ssuess.
There is no difference in writing

cfg.module.rules.push(
   { . . . },
   { . . . } )

and

cfg.module.rules.push(
   { . . . } )
cfg.module.rules.push(
   { . . . } )

The first adds to objects to the rules array with the push function.
The second calls the push function twice with one object each.

But when reading your working example I found my mistake: I wrote

resourceQuery: /blockTyp=i18n/

instead of

resourceQuery: /blockType=i18n/

I missed the e in blockType. Now the first step is solved. Thank you all.

The next step is, to change the language at runtime and therefore I read the docs and added a selection to the <q-toolbar> in file MainLayout.vue. The language change works for all texts in the file MainLayout.vue. It has no effect on the texts in the file components/EssentialLink.vue. There everything is displayed in default language. Is there any advice how to change the language in all nested components too? Thank you.

Clareon

SOLVED: <i18n> Single File Components
Thank you all for advice and help. There are two things in the quasar docs I stumbled:

1 Under Quasar Options and Helpers
there is an entry for App Internationalization (i18n).
There is a header Setting-up-Translation-Blocks-in-your-SFCs.
The description says: “you must ensure that the @__intlify__/vue-i18n-loader and …”.
The example that shows the change for the quasar.conf.js file says

      { loader: '@kazupon/vue-i18n-loader' },

The description wants the new intlify and the example shows the kazupon.

2 In the same document down there is a header Create language switcher.
At the end of the example there is a watch:

 watch: {
    lang(lang) {
      this.$i18n.locale = lang
    }
  }

This works good for all texts in the given one component. If you want to change the language for all components in your app you have to do this:

 this.$root.$i18n.locale = lang;

Important is inserting $root between this and $i18n.
Perhaps anyone is able to change the docs. Thank you.

No More Posting New Topics!

i18n with SFC