0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[vue3] Pluginsデレクトリにおいてのvalidationの使い方について

Posted at

各コンポーネントに書いていたValidationをpluginsデレクトリを作成しそこに記載したところ同じ書き方では動かなかったので、記事にします。

下記の感じでpluginsとしてデレクトリを切りその中にvalidation.tsを作成した。
↓↓↓↓↓↓↓↓↓↓↓↓↓
スクリーンショット 2023-01-08 14.10.17.png

元々は下記でバリデーションがかかっていたんだけど、pluginsディレクトリにそのまま同じ記述を移動させたところ、こんな感じで動かなくなりました。
スクリーンショット 2023-01-08 14.14.55.png
スクリーンショット 2023-01-08 14.17.48.png

困ったなということで、公式ドキュメントを確認。
https://nuxt.com/docs/guide/directory-structure/plugins

スクリーンショット 2023-01-08 14.20.24.png

見るからに書き方が違うので、変更を実施。
最終形が下記です。
↓↓↓↓↓↓↓↓↓↓↓
※バーリデーション部分
スクリーンショット 2023-01-08 14.21.53.png

export default defineNuxtPlugin(() => {
    return {
        provide: {
            //この中にバリデーションを書く!!
        },
    }
})

※呼び出し先(バリデーションを実際に使っているところ)
スクリーンショット 2023-01-08 14.32.59.png
スクリーンショット 2023-01-08 14.34.55.png

//32行目で先ほどvalidation.tsで記載した内容をとってきてます。
//schemaの前に"$"をつけることを忘れないで。付けないと動かないよ。
//ここの書き方は公式と同じなので見比べてください。{ $hello }が{ $schema }になっただけ。

const { $schema } = useNuxtApp()

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?