I need your advice

Hello guys, I need your advice with i18n library. I work on Vue CLI 3 and I have created a simple e-commerce. My project is almost finished but I need to add i18n (internationalization) into it. When I try to do this from YouTube tutorials, It shows me an error like: “Uncaught TypeError: _ctx.$t is not a function”. I wanna do this with .json (like en.json\pl.json\ru.json\etc.json…).

Here below my App.vue screenshot with {{ $t(‘main.welcome’)}} : slightly_smiling_face:

Here below my en.json:

And here below screenshot of browser console error:

What could be wrong?

thank you in advance! :slightly_smiling_face:

If you haven’t defined $t as a global property then you need to register the function on the component’s methods so that it can be used in the template.

Further, please provide code as text and not screenshots.


When sharing code, please don’t use screenshots.

The people wanting to help you can’t copy code from screenshots and therefore can’t edit it.

Instead, share the code as text and make sure to use proper Syntax Highlighting

1 Like

Okay, I got it!
I’m really sorry about that. I have lots of code there so may be you need something specifical (tell me what scripts do you want). If for you it’s more convenient, I can create github repository.

Thank you in advance!

Here below my App.vue template part:

    <div id="wrapper">
        <nav class="navbar is-dark">
            <div class="navbar-brand">
                <router-link to="/" class="navbar-item"><strong><p>{{ $t('main.welcome')}}</p></strong></router-link>

                <a class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu" @click="showMobileMenu = !showMobileMenu">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>

                </a>
            </div>

            <div class="navbar-menu" id="navbar-menu" v-bind:class="{'is-active': showMobileMenu }">
                <div class="navbar-start">
                    <div class="navbar-item">
                        <form method="get" action="/search">
                            <div class="field has-addons">
                                <div class="control">
                                    <input type="text" class="input" placeholder="What are you looking for?" name="query">
                                </div>

                                <div class="control">
                                    <button class="button is-success">
                                        <span class="icon">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="navbar-end">
                    <router-link to="/summer" class="navbar-item">Summer</router-link>
                    <router-link to="/winter" class="navbar-item">Winter</router-link>

                    <div class="navbar-item">
                        <div class="buttons">
                            <template v-if="$store.state.isAuthenticated">
                                <router-link to="/my-account" class="button is-light">My account</router-link>
                            </template>

                            <template v-else>
                                <router-link to="/log-in" class="button is-light">Log in</router-link>
                            </template>

                            <router-link to="/cart" class="button is-success">
                                <span class="icon"><i class="fas fa-shoping-cart"></i></span>
                                <span>Cart ({{ cartTotalLength }})</span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <div class="is-loading-bar has-text-centered" v-bind:class="{'is-loading': $store.state.isLoading }">
            <div class="lds-dual-ring"></div>
        </div>

        <section class="section">
            <router-view/>
        </section>

        <footer class="footer">
            <p class="has-text-centered">Copyright (c) 2021</p>
        </footer>
    </div>

Here below my App.vue script part:

import axios from "axios";

export default {
    data(){
        return {
            showMobileMenu: false,
            cart: {
                items: []
            }
        }
    },
    beforeCreate() {
        this.$store.commit('initializeStore')

        const token = this.$store.state.token

        if (token) {
            axios.defaults.headers.common['Authorization'] = "Token" + token
        } else {
            axios.defaults.headers.common['Authorization'] = ""
        }
    },
    mounted() {
        this.cart = this.$store.state.cart
    },
    computed: {
        cartTotalLength() {
            let totalLength = 0

            for (let i = 0; i < this.cart.items.length; i++) {
                totalLength += this.cart.items[i].quantity
            }

            return totalLength
        }
    }
}

@denDonnar your code looks okay. Seems like $t is not defined. You can console.log it to ensure.

Maybe try reinstalling it according to this guidelines:
https://kazupon.github.io/vue-i18n/installation.html

I don’t know how to define $t for Vue 3. And I tried to reinstall this, but still nothing.