How to use useI18n in a composable function?

[Bit0r]

Here is my code, and I found that the messages don't seem to work. Why is that?

File: app/composables/useLoginProviders.ts

import type { Button } from '#ui/types/button'
import type { Provider } from '@supabase/supabase-js'

import { googleOneTap } from 'vue3-google-login'
import yaml from 'yaml'

let messages: any = `
en:
  continue_with: Continue with {provider}
  loading: Logging in, please do not close this page...
  success: Successfully logged in with {provider}!
  error:
    one_tap: 'Error with One Tap Login: {message}'
    oauth: 'Error with Login: {message}'

zh-Hans:
  continue_with: 使用{provider}继续
  loading: 正在登录验证，请不要关闭页面...
  success: 已通过{provider}成功登录！
  error:
    one_tap: One Tap登录出错：{message}
    oauth: 登录出错：{message}
`
messages = yaml.parse(messages.trim())

console.debug('messages', messages)

export function useLoginProviders() {
	const { t } = useI18n({
		messages
	})

	const config = useRuntimeConfig()
	const supabase = useSupabaseClient()

	const { toastError, toastSuccess } = useAppToast()

	type UIProvider = Button & { click?: Function, provider: Provider }
	type UIProviders = UIProvider[]

	let providers = ref<UIProviders>([
		{
			provider: 'google',
			label: t('continue_with', { provider: 'Google' }),
			icon: 'i-simple-icons-google',
			color: 'red' as const,
		},
		{
			provider: 'twitter',
			label: t('continue_with', { provider: 'Twitter' }),
			icon: 'i-simple-icons-x',
			color: 'black' as const,
		},
		{
			provider: 'discord',
			label: t('continue_with', { provider: 'Discord' }),
			icon: 'i-simple-icons-discord',
			color: 'blue' as const,
		}
	])

	function setLoading(provider: Provider, loading: boolean) {
		const index = providers.value.findIndex((p) => p.provider === provider)
		if (index !== -1) {
			if (loading) {
				providers.value[index].label = t('loading')
			}
			providers.value[index].loading = loading
		}
	}

	async function loginWithOneTap() {
		try {
			setLoading('google', true)

			const response = await googleOneTap()

			const { data, error } = await supabase.auth.signInWithIdToken({
				provider: 'google',
				token: response.credential
			})
			if (error) {
				throw error
			}

			toastSuccess(t('success', { provider: 'Google' }))
			await navigateTo('/home')

		} catch (error) {
			console.error('登录出错', error)
			toastError(t('error.one_tap', { message: error.message }))
		} finally {
			setLoading('google', false)
		}
	}

	async function loginWithProvider(provider: Provider) {
		try {
			setLoading(provider, true)

			const { data, error } = await supabase.auth.signInWithOAuth({
				provider,
				options: { redirectTo: config.public.i18n.baseUrl }
			})
			if (error) {
				throw error
			}

			toastSuccess(`Logged in with ${provider}`)

			await navigateTo('/home')
		} catch (error) {
			console.error('登录出错', error)
			toastError(t('error.oauth', { message: error.message }))
		} finally {
			setLoading(provider, false)
		}
	}

	providers.value = providers.value.map(
		(provider) => {
			switch (provider.provider) {
				case 'google':
					var login = loginWithOneTap
					break
				default:
					var login = async () => await loginWithProvider(provider.provider)
			}

			return {
				...provider,
				click: login,
			}
		})

	return providers
}

[Bit0r]

Using useI18n in composable files allows "Per Composable Translations", making translation management more convenient.