Nuxt3でつまづいた点

NuxtLinkをcomponentにバインディングできない。componentの解決がうまくできていなさそう。

以下のissueを見ると、#componentsからインポートすれば解決してくれるっぽい。

import { NuxtLink } from '#components'

purupurupu

componentsにバインドしたのはいいものの、optionって全部propsで指定しないといけないんけ？

っと思ったら以下の様子。

今回はtemplateの直下にcomponentを書いているので、自動で属性設定してくれるらしい。親切。
hrefとかを渡すとええ感じに属性として使ってくれた。
Vue 3 の <script setup> を使用すると、defineProps で定義されていない属性は自動的に $attrs として扱われます。

これらの $attrs はデフォルトでルート要素にバインドされるため、<component> タグに渡された追加の属性（例えば target）も内部のコンポーネント（NuxtLink や a タグ）に自動的に伝達されます。

purupurupu

NuxtではなくVueの話だが、emitとして親に渡すイベントは別に親側でキャッチしないでいいらしい。
ちゃんとキャッチしないと型エラーになりそうなもんだけど、イベント自体が不定だしそんなもんだわな。

purupurupu

vee-validateを使っていてエラーがうまく拾えなくて泣いていたが、格納先のerrosもreactiveじゃん...ということで以下の方法で確認。

// エラーの監視を追加
watch(errors, (newErrors) => {
  console.log('Validation errors changed:', JSON.stringify(newErrors, null, 2))
})