Leverage the power of i18n in both vuejs components and blade.php templates

Is it possible to use i18n in both blade.php and Vue.js views? I have set up a json file for i18n as shown below:

export default {
    "en": {
        "menu": {
             "home":"Home",
             "example":"Example"
        }
    }
}

Using this i18n setup works with Vue.js, but I am unsure how to implement it in Laravel. Is there a way to achieve this?

Alternatively, is there a method to access a cookie in both Laravel and Vue.js without needing to use axios requests to store and retrieve it? (I specifically need to store and read the language).

Below is an example of a blade.php view where I aim to incorporate i18n:

@if (Route::has('register'))
      <li class="nav-item">
             <a class="nav-link" href="{{ route('register') }}">{{ __('home.example') }}</a>
      </li>
@endif

In Vue.js files, all I do is {{ $t('home.example') }}

I am using the following library: https://github.com/kazupon/vue-i18n

Thank you very much!

Answer №1

Using vue-i18n in Blade templates may not be straightforward.

In Blade templates, you can utilize the @ symbol along with curly braces ({{ and }}) to prevent evaluation by Blade. Consider using @ {{ $t('home.example') }} within your Blade template. However, it should be placed inside the Vue mounted element for Vue-i18n to detect it. But, keep in mind that Vue replaces the mounted element in Vue 2.x, potentially causing your Blade templates within the mounted element to disappear.

To tackle this issue, a possible approach is using a generator to transfer all Laravel translation strings to Vue-i18n. Check out this package laravel-vue-i18n-generator which seems like a useful tool for this task.

This method involves storing your translation strings in Laravel and accessing them normally in Blade. Whenever there are updates to these strings, running the generator again would make them available in Vue-i18n, allowing usual access through Vue-i18n functionalities.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets. Since the n ...

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below: https://i.stack.imgur.com/Mia2D.gif The gif demonstrates how the drop-down me ...

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

Lately, I've been facing some challenges and my objective is to change the color of the thumb label on my v-slider to a custom one that is defined in the component's design. Can anyone provide guidance on how to achieve this? Regards, Joost ...

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

Tips for eliminating the ripple effect when clicking on a q-list item

I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes ...

How to conceal sections of a webpage until a child component is successfully loaded with vue

I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...

Having difficulty positioning breadcrumb items to float on the right side

As I create my Vue.js and Bootstrap application, I am working on a breadcrumb feature that presents some challenges. Specifically, I am trying to align the icons to the right while ensuring that the text "Files" remains floated to the left. <script s ...

Controlling the back DIV while maintaining overlapping layers

I successfully positioned my right hand content on top of the leaflet map in the background using CSS properties like position and z-index. However, I am looking for a way to make the overlapping div not only transparent but also non-interactive while stil ...

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

Get rid of the box-shadow on the Vuetify element

I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...

Improving Vue Component on Navigation

I am facing an issue with my navbar where I have two versions. Version 1 features a white text color, while Version 2 has black text. The need for two versions arises due to some pages having a white background, hence the requirement for black text. Bot ...

Implementing a watcher property in JavaScript to dynamically add a class to an element

I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

Vuetify's data table now displays the previous and next page buttons on the left side if the items-per-page option is hidden

I need help hiding the items-per-page choices in a table without affecting the next/previous functionality. To achieve this, I've set the following props: :footer-props="{ 'items-per-page-options':[10], &apo ...

Is there a way to assign a specific color to individual users in a chat?

I have successfully implemented a chat feature using Pusher, but now I want to customize the appearance by changing the color of the username for the logged-in user when they are active in the conversation. Currently, both my username and another user&apos ...

What are some creative ways to customize v-slot:cell templates?

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...