Comments (4)
Thanks for the report @nwood-personal. can you provide more context to figure the problem?
from laravel-vue-i18n.
I have an onboarding app for our guest in our company with laravel 10 and vue 3.
I have the package ag-grid installed for my table display and it take an array coldefs to define the header and header name.
I want the header to be also translated so i added the trans() function to traduce them. But when im visiting the page the translation are good but when im reloading the page everything go back to key.
My table vue component:
<template>
<div class="w-10/12 mx-auto pt-10">
<button class="px-3 py-2 my-2 border border-black rounded-lg mr-2 bg-red-500 text-white disabled:opacity-40" disabled id="btnDelete" v-on:click="onBtDelete">{{ $t("delete") }}</button>
<button class="px-3 py-2 my-2 border border-black rounded-lg bg-blue-600 text-white disabled:opacity-40" disabled id="btnView" v-on:click="onBtView">{{ $t("view") }}</button>
<ag-grid-vue
class="h-[60vh] ag-theme-quartz"
:rowData="rowData"
:columnDefs="this.colDefs"
:editType="editType"
@grid-ready="onGridReady"
@row-selected="onRowSelected"
@rowEditingStopped="rowEditingStopped"
:defaultColDef="defaultColDef"
:rowSelection="'single'"
></ag-grid-vue>
</div>
</template>
<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Core CSS
import "ag-grid-community/styles/ag-theme-quartz.css"; // Theme
import { AgGridVue } from "ag-grid-vue3"; // Vue Grid Logic
import { useRouter } from 'vue-router'
import { trans } from 'laravel-vue-i18n'
window.timeOperation = function timeOperation(name, operation) {
aggCallCount = 0;
compareCallCount = 0;
filterCallCount = 0;
var start = new Date().getTime();
operation();
var end = new Date().getTime();
console.log(
name +
' finished in ' +
(end - start) +
'ms, aggCallCount = ' +
aggCallCount +
', compareCallCount = ' +
compareCallCount +
', filterCallCount = ' +
filterCallCount
);
};
var aggCallCount = 0;
var compareCallCount = 0;
var filterCallCount = 0;
export default {
data(){
return{
header:'',
colDefs: [
{ field: "id", editable: false, checkboxSelection: true},
{ field: "resp_id", headerName: trans("entry.responsible"), editable: false },
{ field: "company_name", headerName: 'Company name', filter: true},
{ field: "visit_subject",headerName: 'visit subject', filter: true},
{ field: "contact",headerName: 'Contact interne', filter: true },
{ field: "entry_date", headerName: 'Entry Date'},
{ field: "exit_date", headerName: 'Exit date'},
],
}
},
components: {
AgGridVue, // Add AG Grid Vue3 component
},
methods: {
rowEditingStopped(event) {
var data = event.data;
delete data['resp_id'];
axios.patch(`api/groupes/${data.id}`,data).then((res) => {
console.log(res);
})
}
},
setup() {
const router = useRouter();
const rowData = ref([]);
// Row Data: The data to be displayed.
axios.get(`api/groupes`).then((res) => {
rowData.value = res.data.data;
})
const gridApi = ref();
const onGridReady = (params) => {
gridApi.value = params.api;
};
const onBtDelete =() =>{
// get the first child of the
var selectedRow = gridApi.value.getSelectedRows();
if (!selectedRow || selectedRow.length === 0) {
console.log('No rows selected!');
return;
}
selectedRow.forEach(element => {
axios.delete(`api/groupes/${element.id}`).then(() => {
timeOperation('Delete', () => {
gridApi.value.applyTransaction({ remove: selectedRow });
});
}).catch((error) => {
console.log(error.response.data);
});
});
};
const onBtView =()=>{
var selectedRow = gridApi.value.getSelectedRows();
if (selectedRow.length === 1) {
var id = selectedRow[0].id;
router.push({
name: 'details',
query: {
group_id: id
}
})
}else{
console.log('too much row selected');
}
};
const onRowSelected = () => {
var selectedRow = gridApi.value.getSelectedRows();
if (!selectedRow || selectedRow.length === 0) {
document.getElementById('btnDelete').disabled = true;
document.getElementById('btnView').disabled = true;
}else{
document.getElementById('btnDelete').disabled = false;
document.getElementById('btnView').disabled = false;
}
};
// Column Definitions: Defines & controls grid columns.
return {
rowData,
defaultColDef: {
editable: true,
},
gridApi,
editType: 'fullRow',
onGridReady,
onBtDelete,
onRowSelected,
onBtView,
};
},
};
</script>
my app.js :
import './bootstrap';
import '../css/app.css';
import { createApp } from 'vue';
import App from './layouts/App.vue';
import router from './router.js';
import axios from 'axios'
import { i18nVue } from 'laravel-vue-i18n';
const apiClient = axios.create({
baseURL: '/api',
withCredentials: true,
});
export default {
getUser() {
return apiClient.get('/user');
},
};
const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.use(i18nVue, {
resolve: async lang => {
const langs = import.meta.glob('../../lang/*.json');
return await langs[`../../lang/${lang}.json`]();
}
})
app.use(router)
app.mount('#app')
and the welcome blade:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Montremo - Welcome</title>
</head>
<body class="backdrop-blur">
<div class="absolute top-2 left-5 flex space-x-3 text-primary-memo bg-gray-500 bg-opacity-50">
<a class="opacity-100" href="{{ url('locale/en') }}" ><i class="fa fa-language"></i> EN</a>
<a class="opacity-100" href="{{ url('locale/fr') }}" ><i class="fa fa-language"></i> FR</a>
</div>
@if (Auth::check())
<script>
window.Laravel = {!!json_encode([
'isLoggedin' => true,
'user' => Auth::user()
])!!}
</script>
@else
<script>
window.Laravel = {!!json_encode([
'isLoggedin' => false
])!!}
</script>
@endif
@vite('resources/js/app.js')
<div id="app"></div>
</body>
</html>
from laravel-vue-i18n.
I have the same issue, it works for me when hot reload is happening with vite but when I refresh the page, the data get's lost. Only the key will show. Any update for this issue? @xiCO2k
from laravel-vue-i18n.
Hey, sorry for the delay, there are some options to solve your issue:
- Change the import plugin to non lazy load, like this:
app.use(i18nVue, {
resolve: async lang => {
const langs = import.meta.glob('../../lang/*.json', { eager: true });
return langs[`../../lang/${lang}.json`].default;
}
})
- Make use of the
wTrans
instead oftrans
:
The trans
method is not reactive so it only loads once and since some times the page loads before the translation file is loaded it can return the key.
- Create a watch to check if the translation is loaded with
isLoaded()
method.
After that you can use the trans
method will get the translation for your key.
from laravel-vue-i18n.
Related Issues (20)
- How can I pass a default value for the case of a non-existent or empty-string translation? HOT 2
- [REQ] React version HOT 1
- Library should work for nested keys in translation files. HOT 1
- Problem with php langs generation HOT 6
- Console error after vue 3.4 update HOT 2
- Language switches from english to the selected language HOT 2
- Update supported vue version to 3.4 HOT 1
- path.key not working at all HOT 1
- [REQ]: React support HOT 1
- Explain difference between trans, wTrans and $t? HOT 1
- Errors when building with TypeScript - `No overload matches this call` HOT 2
- TypeError: Cannot read properties of undefined (reading 'kind') when adding i18n() to plugins in vite.config.js HOT 3
- Object Translation HOT 2
- add transTo method for getting translation of specific lang HOT 1
- Uncaught (in promise) TypeError: Cannot read properties of null (reading 'replace') HOT 8
- Validation error messages received without being translated HOT 9
- Inject your package on Unit Test HOT 2
- Need to rebuild project each time a language key is translated. HOT 1
- Hydration text content mismatch with Inertia SSR HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from laravel-vue-i18n.