月: 2024年10月

【Version】
Laravel 11.9
Vue 3.4
vue-i18n 9.14
php 8.3

大変だったわ～
ChatGPTもいろんなページも見たけど、自分が作っているバージョンに当てはまるものがなくて。
Karnel.phpに設定して！って言われても、Karnel.phpないし。
vue-i18nのインストールについては他のサイトを参照。
結局公式サイトをちゃんとチェックしないとダメということですな。

参照URL：Vue I18n #Composition API

だいぶん端折って、関係のあるところだけメモしておく。
resources/js/app.js

import { createI18n } from "vue-i18n";

const i18n = createI18n({
    locale: __locale,
    legacy: false, 
    messages,
});

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(i18n)
....

resources/js/Pages/***.vue

<script setup>
import { computed, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n';

// 多言語変換の関数名をtとして設定
const { locale: i18nLocale, t } = useI18n();

watchEffect(() => {
    i18nLocale.value = *****;  // ←ここに今利用すべき言語('ja','en',....を設定)
});

// メソッド内で使うとき
const msg = computed(() => t('load'));   // computedで変換してから利用
console.log(msg);
</script>

<!-- タグ内で使うとき -->
<template>
    <span>{{ t('load') }}</span>
</template>

今のバージョンだと、$tでなくて、tになってる。
alertとかで使うときは、computedで変換してから利用しないとエラーになる。
他のページにある、this.$t(‘***’)とかでエラーになったので困っていたけど、
これで何とか多言語対応もいけそうな気がする。