Hi, We are currently testing out this website for a project which needs to be in t

How do we integrate language internationalization? about kirby-vue-starterkit HOT 8 CLOSED

jmheretik commented on June 9, 2024

How do we integrate language internationalization?

from kirby-vue-starterkit.

Comments (8)

jmheretik commented on June 9, 2024

Hello,

recently I changed the folder structure of this project and the docs so please check out the new version.

Concerning your question, I know that it's possible (and quite easy) when using the JSON content representations - you just prefix the url in api calls with the language code, e.g.:
calls to /home.json become /en/home.json which return the english version, /fr/home.json return french version and so on

I've actually done this in a previous project which inspired this project to come to life:

first I printed out the current language code straight in the <html> tag on server side:

<!DOCTYPE html>
<% if (process.env.NODE_ENV === 'production') { %>
  <html lang="<?= $site->language()->code() === 'en' ? 'en' : 'fr' ?>">
<% } else { %>
  <html lang="en">
<% } %>
  <head>
    <meta charset="utf-8" />
    ...

alternatively you can just set it to default language, or load the last user-set value from local storage

then I made sure its included in the Vue router base so that all <router-link>s include the lang prefix:

new VueRouter({
   mode: 'history',
   base: document.documentElement.lang === 'fr' ? '/fr/' : '/',
   routes
})

finally I included it in the api calls:

async get(page) {
   const lang = document.documentElement.lang === 'fr' ? 'fr/' : ''

   const resp = await fetch(`${window.location.origin}/${lang}${page}.json`)
   const json = await resp.json()

   return json
}

And also remember to provide some way for the users to switch the language https://getkirby.com/docs/guide/languages/switching-languages:

<a :href="switchLanguageLink" class="big-font link"> {{ nextLanguage }} </a>

export default {
  computed: {
    nextLanguage() {
      return document.documentElement.lang === 'en' ? 'French' : 'English'
    },
    switchLanguageLink() {
      const lang = document.documentElement.lang === 'fr' ? '' : 'fr/'
      return `${window.location.origin}/${lang}${this.$root.isHomePage ? '' : this.$root.currentPageOtherUrl}`
    }
  }
}

As for the API approach, I'll have to check it out and come back to you, because I haven't done it before.

After all, I'll surely try to implement this in a non-invasive way, as soon as I find some time, because it sounds like a core functionality that many people might find useful.

from kirby-vue-starterkit.

nncrns commented on June 9, 2024

First of all thank you for this great repo, I'm a rather fresh Kirby enthusiast and Nuxt/Vue beginner and this is exactly what I was looking for to get started :)

I am also working on a multi-lang site (using your Nuxt starterkit) and the links you provided as examples seem to be broken. Would be super helpful if, for now, you could include some snippets as pointers. Thanks a lot!

from kirby-vue-starterkit.

jmheretik commented on June 9, 2024

Hey. You're right, I had to make that repo private.

I replaced links in the previous comment with code snippets. But remember this was how it worked in a project 2 years ago and since then the setup in this repo has changed so its really just to point you in a direction. You'll have to implement it yourself for now (until I update this project to support it out of the box :).

from kirby-vue-starterkit.

nncrns commented on June 9, 2024

This should already be very helpful. Thank you!

from kirby-vue-starterkit.

nncrns commented on June 9, 2024

Hello again, I am finally coming around to implementing this in my project but am still a little unsure about how to implement this. I am using your Nuxt-Vue setup, so I changed your instructions above as follows (my default language is de, secondary language en):

Added this in nuxt.config.js:

htmlAttrs: { lang: 'de' }

Also tried printing out the language codes in my home.json.php like this:

'site' => [ 'langs' => $site->languages()->code()->value() ]

However, this returns a value of null.

Set the base URL in .env:

NUXT_ENV_BASE_URL=document.documentElement.lang === 'en' ? '/en/' : '/'

Edit:
But that's not right, this gives me localhost:3000document.documentElement.lang === 'en' ? '/en/' : '/' as soon as I restart the server. But setting the base URL in nuxt.config.js, like so (or with mode and routes as described above):

router: {
    base: document.documentElement.lang === 'en' ? '/en/' : '/'
}

gives me a Nuxt Fatal Error ReferenceError: document is not defined.

Where should I set this?

Added the async paragraph to mixins/page.js after asyncData, which (I guess obviously) doesn't work, but I'm afraid I don't really understand this piece of code. I suspect it should be rewritten to be included in the asyncData call? Might you be able to help out with this? 🙏

Thanks a lot in advance!

from kirby-vue-starterkit.

jmheretik commented on June 9, 2024

Hey again :-)

As I mentioned before, those steps above were meant to serve just as an inspiration and apply mostly to the vue-json variant. But by no means was it meant to be a copy-paste ready solution 😃. I guess to use this starterkit you must be already rather familiar with Kirby and Vue. I'll try to make it more beginner friendly as a future enhancement :)

So to get you started, first of all, make sure you enable and fully understand the multi lang setup in Kirby: https://getkirby.com/docs/guide/languages/introduction

Then you can get supported languages and the current language in home.json as follows:

foreach ($kirby->languages() as $language) {
  $langs[] = $language->code();
}

$data = [
  'langs' => $langs,
  'currentLang' => $kirby->language()->code(),
  ...
];

echo json_encode($data);

About the error you got: you can't access document in the .env file or nuxt.config.js - these are processed in the building process of your app by node.js and have no browser context (variables such as window or document are available only in browser). First place where in a Nuxt app you have access to a browser is in client side plugins - https://nuxtjs.org/guide/plugins.

So now if you can get current language and a list of supported languages from backend, all you need to do is:

have some link in your menu for user to switch from one language to another and remember their choice (e.g in a cookie or localStorage)
if you decide to have the language code included in the URLs, make sure all your links across your app respect this. I wish it was as easy as setting the nuxt router base, but it's not. i haven't done this yet in a Nuxt app so that's why I suggest reading up on this. maybe try some package to do it for you? (e.g. https://github.com/nuxt-community/nuxt-i18n)
i guess that's it... oh and remember to include the code of user's chosen language in API calls... maybe add it already to the base api url when initializing it in kirby-api-client.js

Hope I could help at least a bit.

from kirby-vue-starterkit.

nncrns commented on June 9, 2024

Thanks for your answer! I'll be checking out your suggestions.

In my particular case, the client doesn't necessarily need a full-blown multi-lang site, as only the a part of the content will be translated and a URL change is not necessarily needed, so right now I am thinking of building a simple workaround by storing the language selection via Vuex and then conditionally rendering content based on that.

Will be looking forward to future releases where this feature is included ;)

from kirby-vue-starterkit.

jmheretik commented on June 9, 2024

Hey guys,

I implemented a simple multilang support in the vue-json variant (along with upgrade to Vue 3). But its currently available only in the develop branch of this repo because I haven't yet implemented it for the other variants.

So all you need to do is set one flag in config.php and few clicks in the panel and you're up and running. Simply follow this guide on how to enable the multilang support in Kirby: https://getkirby.com/docs/guide/languages/introduction#enabling-the-multi-lang-feature-in-the-panel

I recommend adding new languages using the panel because of this nifty little detail:

The Panel automatically renames all existing content and file meta data files and includes the language extension.

At last, don't forget to implement some way for the user to switch the languages on the frontend :)
https://getkirby.com/docs/guide/languages/switching-languages

PS: These steps remain optional and I'm not going to pre-do them in the repo = to keep the app compatible with no multilang setup and to keep the frontend unopinionated and 1:1 with the original starterkit.

from kirby-vue-starterkit.

How do we integrate language internationalization? about kirby-vue-starterkit HOT 8 CLOSED

Comments (8)

Related Issues (15)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent