くらげになりたい。

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

Vue3

カラーピッカーにvue3-swatchesを試してみる

Nuxt3へのリプレイスというか作り替えを進めているけど、 カラーピッカーとして使っていたvue-swatchesが、 メンテナンスされておらず、Vue2で止まってるようだった。。 www.memory-lovers.blog いろいろ見ていると、別の人がVue3版を公開してくれてたので、…

Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編

前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω`*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω`*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-…

vite/vueでChrome拡張機能を作ってみる|1. Hello World編

なにかChrome拡張を作ってみたいなと思い、 viteとvueでHello Worldしてみたときの備忘録(*´ω`*) 思いの外、簡単にHello Worldできた(*´ω`*) Welcome - Chrome Developers Vite | 次世代フロントエンドツール Introduction | CRXJS Vite Plugin プラグイン…

Nuxt3でvue3-notificationをつかって通知する

BuefyからTailwind CSSに移行してるけど、 通知を自前で作る必要があるので、いろいろ試してみたときの備忘録。 通知関連のVueコンポーネントはいくつかあるけど、 Vue3対応でメンテナンスされているvue3-notificationを利用 使い方 まずはインストール $ np…

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…