くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Vue3

Vue3対応版のVee-Validate4がかなり変わっていた

Vee-Validate3を使ってたけど、Vue3を利用しているので、 Vue3対応版のVee-Validate4を試してみたときに備忘録。 かなり変わっているので、びっくりする(*´ω`*) 主な変更点 ValidationProviderなどで囲わなくなり、 Form、Fieldなどのコンポーネントが提供…

Vue3のReactivityを学び直したときのまとめ

Vue3でいろいろ試してるけど、若干混乱してきたので、 ガイドを再度読み直してみた。慣れるまでむずい。。 リアクティブの基礎 | Vue.js まとめ リアクティブの基本 リアクティブにしてくれるのはref()。オブジェクトもdeepで追跡 reactive()はリンクを保っ…

Vue3ではrootに複数の要素OKだけどNuxt3のpage配下は単一要素がいい

Vue3ではFragmentsが導入されて、マルチルートノードコンポーネントがサポートされた。 ・Fragments | Vue.js 以下のようなのも対応しているけど、 <template> <button class="btn mx-2">ボタン1</button> <button class="btn btn-primary mx-2">ボタン2</button> </template> Nuxt3のpagesだと、warningが出てしまう。。 runtime-core.esm-bundler.js:38 [Vue warn…

Nuxt3/Vue3: Composition APIでのテンプレート参照(`$refs`)

Nuxt3で$refsを使うと思ったら、うまくいかなかった。。 Composition APIで$refsは使えないらしい。。 Composition APIでのテンプレート参照したいときは、 refと同じ変数をRefを使って用意すればよいらしい。 テンプレート参照 | Vue.js <script setup> const myCoolDiv =</script>…

Nuxt3でSFCのsetup(Reactivity API/Composition API)

Vue3で登場したComposition APIがNuxt3のデフォルトっぽい。 ただだいぶ書き方が変わったのでそのあたりを調べたときの備忘録。 なぜComposition APIなのか? | Vue.js Vue2からある書き方は、Options API。 <script setup>構文 新しく増えた<script setup>はこんな感じ。 SFC内でComposi…