Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation are not available within mounted() of a vue-component #195

Open
matrad opened this issue Dec 6, 2024 · 0 comments
Open

Translation are not available within mounted() of a vue-component #195

matrad opened this issue Dec 6, 2024 · 0 comments

Comments

@matrad
Copy link

matrad commented Dec 6, 2024

Hello,

I'm using laravel & vite & your plugin.

My app.js looks like this:

import { createApp } from "vue/dist/vue.esm-bundler.js";
import { i18nVue, trans } from 'laravel-vue-i18n'

if(document.getElementById('v-login-container')) {
    createApp(Login)
        .provide('$t', trans)
        .use(i18nVue, {
            lang: 'de',
            resolve: lang => import(`../../resources/lang/php_${lang}.json`),
        })
        .mount('#v-login-container')
}

One Component looks like this:

<template>
	<div>LOGIN</div>
</template>

<script>
import Swal from 'sweetalert2'

export default {
  name: 'Login',
  inject: ['$t'],
  mounted: function() {
    if(window.location.search=='?login') {
            Swal.fire(
                {
                    title: this.$t('popup.login.title'),
                    text: this.$t('popup.login.login_success'),
                    icon: 'success',
                }
            )
    }
  },
  data() {
	return {
		username: '',
	}
  }
}
</script>

In this case I get the Alert without translations. If I put the Swal.fire within a setTimeout method` it works:

    if(window.location.search=='?login') {
        setTimeout(() => {
            Swal.fire(
                {
                    title: this.$t('popup.login.title'),
                    text: this.$t('popup.login.login_success'),
                    icon: 'success',
                }
            )
        }, 500)
    }

I also tried to load translations differently (probably sync not async):

import php_de from '../../resources/lang/php_de.json';
if(document.getElementById('v-login-container')) {
    createApp(Login)
        .provide('$t', trans)
        .use(i18nVue, {
            lang: 'de',
            resolve: lang => php_de,
        })
        .mount('#v-login-container')
}

But this nothing changes, the translations are loaded async in the container.
I also see a minimal flickering while opening the Package (changing from translation keys to text).

Can you help me what I did wrong?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant