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

Modify the document title when the locale changes #1049

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Modify the document title when the locale changes #1049

gefey397831 Jul 8, 2022

Replies: 2 comments · 3 replies

kazupon Jul 8, 2022 Maintainer

gefey397831 Jul 9, 2022 Author

parallels999 Feb 8, 2023

it9gamelog Jun 5, 2023

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