3

I am using Quasar v2, using the Vue Composition API and vue-i18n, and I would like the site title to change display when the active language changes (via a drop down), but whatever I am trying does not result in the title language being changed. Any ideas?

Below is what I have right now (just the essentials):

import { defineComponent, ref, computed } from 'vue';
import { useMeta } from 'quasar';

export default defineComponent({
  setup () {
    const { t: translate } = useI18n() as any;

    const siteTitle = computed(() => translate('title.app') as string);

    const pageMetadata = {
      title: 'untitled',
      titleTemplate: (title: string) => `${title} - ${siteTitle.value}`
    };
    useMeta(pageMetadata);
  }
});

The code I am using to switch languages:

async onChangeLanguage () {
  try {
    let locale = this.language;
    if (this.language === 'en') {
      locale = 'en-GB';
    }

    this.$i18n.locale = locale;

    const quasarLang = await import(`quasar/lang/${locale}`);
    if (quasarLang) {
      Quasar.lang.set(quasarLang.default);
    }
  } catch (error) {
    this.$log.error(error);
  }
}
Andre M
  • 6,649
  • 7
  • 52
  • 93

1 Answers1

0

According to the documentation, useMeta will not be reactive if you pass a simple object to it. Rather, you should pass a function that returns the desired value:

export default defineComponent({
  setup () {
    const { t: translate } = useI18n() as any;

    const siteTitle = computed(() => translate('title.app') as string);

    useMeta(() => {
       const title = 'untitled';
       const titleTemplate = `${title} - ${siteTitle.value}`
       return { title, titleTemplate }
    });
});
Myk Willis
  • 12,306
  • 4
  • 45
  • 62
  • This is not working for me and it appears `titleTemplate` should be a function. Does this work for you when you try it? – Andre M Mar 18 '22 at 18:00
  • @AndreM I simply tweaked your original code such that it uses an anonymous function. I didn't test anything locally, sorry that didn't help you. – Myk Willis Mar 18 '22 at 20:55