Vue 3 (composition api), Laravel 10, Inertiajs
файл app.js:
....
import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import {i18nVue} from 'laravel-vue-i18n';
....
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({el, App, props, plugin}) {
return createApp({render: () => h(App, props)})
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(i18nVue, {
resolve: async (lang) => {
const langs = import.meta.glob("../../lang/*.json");
if (lang.startsWith("php_")) {
return await langs[`../../lang/${lang}.json`]();
} else {
return await langs[`../../lang/php_${lang}.json`]();
}
},
})
.mount(el);
},
vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import i18n from 'laravel-vue-i18n/vite';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
i18n( ),
],
});
в шаблоне строки переводятся
<template>
<div>
{{ $t("components.maximum_files", {value: props.max}) }}
</div>
</template>
Как использовать использовать $t (Vue I18n) в компонентах в js () , например в функции?
<script setup>
....
async function fileChange(event) {
....
emit('maxFilesize', files[i].size)
if (props.warnings) {
toast.add({
color: 'warning',
message: $t("components.maximum_filesize") + maxFilesize + 'MB', //?
duration: 5000
})
}
break;
....
}
....
</script>
Средний