Nuxt BridgeをNuxt3に移行。injectを書き換える。utilsとの違い

2023年8月28日 / 最終更新日時 : 2023年9月26日 admin Vue.js（主にNuxt.jsとVuetify）

injectの書き方が変わっているので修正します。序でにTypeScriptへの変更も。
utilsでも対応可能なので、違いや使い所も確認しておきます。
前回：Nuxt BridgeをNuxt3に移行。$axiosをFetch APIに書き換える。nuxt-lodashを導入

injectを書き換える
utilsで同じ事をしてみる
【次回】nuxt-authを導入
今回のコミット内容

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に書き換えると良さそう。