injectの書き方が変わっているので修正します。序でにTypeScriptへの変更も。
utilsでも対応可能なので、違いや使い所も確認しておきます。
前回:Nuxt BridgeをNuxt3に移行。$axiosをFetch APIに書き換える。nuxt-lodashを導入
Uncaught (in promise) TypeError: _ctx.$dateFormat is not a function
WARN [warn] [nuxt] Plugin /Users/xxxx/workspace/nuxt-app-origin/plugins/utils.js is in legacy Nuxt 2 format (context, inject) which is likely to be broken and will be ignored.
injectを書き換える
pluginsは自動インポートされるようになったので、
nuxt.config.ts(.js)での定義は不要になりました。
plugins/utils.js -> ts
前半は、JavaScriptからTypeScriptへの書き換えのみ。injectをprovideに変更します。
呼び出し側は$dateFormat等のまま呼び出せるので、変更不要。
{{ $dateFormat('ja', infomation.started_at, 'N/A') }}
- const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) + const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)) - const dateFormat = (locales, value, defaultValue = null) => { + const dateFormat = (locales: string, value: string | null, defaultValue: any = null) => { - const timeFormat = (locales, value, defaultValue = null) => { + const timeFormat = (locales: string, value: string | null, defaultValue: any = null) => { - const pageFirstNumber = (info) => { + const pageFirstNumber = (info: any) => { - const pageLastNumber = (info) => { + const pageLastNumber = (info: any) => { - const localeString = (locales, value, defaultValue = null) => { + const localeString = (locales: string, value: any, defaultValue: any = null) => { - const textTruncate = (text, length) => { + const textTruncate = (text: string | null, length: number) => { - export default (_context, inject) => { + export default defineNuxtPlugin((_nuxtApp) => { + return { + provide: { - inject('config', useRuntimeConfig()) - inject('sleep', sleep) - inject('dateFormat', dateFormat) - inject('timeFormat', timeFormat) - inject('pageFirstNumber', pageFirstNumber) - inject('pageLastNumber', pageLastNumber) - inject('localeString', localeString) - inject('textTruncate', textTruncate) + sleep, + dateFormat, + timeFormat, + pageFirstNumber, + pageLastNumber, + localeString, + textTruncate - } + } + } + })
APIのレスポンス等では、型やオブジェクトの内容は保証されない。
エラーで落としたくない所は、anyにして、値のチェック・不正時のレスポンスを残しています。
utilsで同じ事をしてみる
utils/dateFormat.ts
// 日付を言語のフォーマットで返却 export const dateFormat = (locales: string, value: string | null, defaultValue: any = null) => { if (value == null || value === '') { return defaultValue } return new Date(value).toLocaleString(locales, { year: 'numeric', month: '2-digit', day: '2-digit' }) }
こんな感じに書けば、使えます。
呼び出し側は、$なしで、dateFormatで呼び出せます。
{{ $dateFormat('ja', infomation.started_at, 'N/A') }} ↓ {{ dateFormat('ja', infomation.started_at, 'N/A') }}
あまり違いがないですね。
utilsの方が、$が無い分、唐突に出てきた感じはしますが、utilsの中に居そうと察しがつけば問題ないか。(自動インポートとはそういうものだし)
単純なものはinjectで、複雑なものはutilsにすると必要な所だけインポートされるので、幸せになれそう。Mixinをutilsに書き換えると良さそう。
【次回】nuxt-authを導入
まだログインできないので、機能的には動いていない。もう少しかな。まだまだかな?
次回は、下記の対応から記載します。
→ Nuxt3で@sidebase/nuxt-authのlocalの挙動を調べてみた
→ Nuxt BridgeをNuxt3に移行。nuxt-authを導入