Modify the document title when the locale changes #1049

gefey397831 · 2022-07-08T13:44:11Z

gefey397831
Jul 8, 2022

Thank you for this great project!

I'm using Vue 3 + Vite + Vue I18n 9.

I want to modify the <title> and <html lang=""> in index.html when the locale changes.

I used {{ $t("message.title") }} but it doesn't work (it works in .vue files). {{ $t("message.title") }} was rendered directly. What should I do? Thank you!

kazupon · 2022-07-08T14:38:19Z

kazupon
Jul 8, 2022
Maintainer

You can realize by using @vueuse/head
https://github.com/vueuse/head

2 replies

gefey397831 Jul 9, 2022
Author

Thanks for your reply!

There are two issues:

{{ $t("message.hello") }} can only be used in the template, but useHead is only in <script>, not <template>;
There is still no way to change the lang of <html>.

parallels999 Feb 8, 2023

is this answered?

it9gamelog · 2023-06-05T03:38:28Z

it9gamelog
Jun 5, 2023

Found this discussion, having the same problem.

Now my solution is https://stackoverflow.com/questions/36612847/how-can-i-bind-the-html-title-content-in-vuejs, by creating a component I could bind the t('Title') to the props.

1 reply

it9gamelog Jun 5, 2023

Or by Pinia

Store:

import { defineStore } from 'pinia'
import Cookies from 'js-cookie'

export const useAppStore = defineStore('app', {
  state: () => ({
    title: null
  })
})

Child Page:

<script setup>
import { watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from 'stores/app'

const { t } = useI18n()

const appStore = useAppStore()
watchEffect(() => {
  appStore.title = t('title')
})
</script>

Index/Layout Page:

<script setup>
import { useAppStore } from 'stores/app'
const appStore = useAppStore()

watch(() => appStore.title, () => {
  document.title = appStore.title
})
</scirpt>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Modify the document title when the locale changes #1049

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Modify the document title when the locale changes #1049

Uh oh!

Uh oh!

gefey397831 Jul 8, 2022

Replies: 2 comments · 3 replies

Uh oh!

kazupon Jul 8, 2022 Maintainer

Uh oh!

Uh oh!

gefey397831 Jul 9, 2022 Author

Uh oh!

parallels999 Feb 8, 2023

Uh oh!

it9gamelog Jun 5, 2023

Uh oh!

it9gamelog Jun 5, 2023

gefey397831
Jul 8, 2022

Replies: 2 comments 3 replies

kazupon
Jul 8, 2022
Maintainer

gefey397831 Jul 9, 2022
Author

it9gamelog
Jun 5, 2023