useFetch, useAsyncData, $fetch にて Bearer のようなシステム共通で利用するヘッダー等を設定する方法を記載する。 結論https://github.com/nuxt/nuxt/issues/14936#issuecomment-1397369123にて、解決方法が示されている。 $fetch を利用する場合Nuxt3 の $fetch は以下 unjs/ofetch を利用しており、以下 Create fetch with default options を参考にするとよい。https://github.com/unjs/ofetch#...

Vue 3.2 で textarea タグをラップした UI コンポーネントを用意して v-model.trim を使ったところ、入力中に改行や空白文字など突然取り除かれる現象が発生しました:App.vue<script setup>const msg = ref("");</script><template> <CustomTextarea v-model.trim="msg" /></template>このような現象は textarea タグで v-model.trim を使ったときには発生していな...

Vercel/SWR (以下 SWR)はデータフェッチのための React Hooks ライブラリで、データ取得のロジックを単純化したり様々な機能の恩恵を受けられます。Kong/swrv (以下 swrv)は Vue において SWR と同じようなことを実現している Vue Composition API 向けライブラリです。swrv については情報が少ない[1]ものの、SWR のドキュメントや事例を活用できるほど両者はよく似ています。とはいえ、両者には細かな違いが見受けられるため本記事にまとめました。両者の違いと特性を知っていただければ幸いです。 動作確認したバージョンRe...

Python パッケージ群のインテリセンスを有効化するため、各ワークスペースの .vscode/settings.json へ python.autoComplete.extraPaths[1] を設定していましたが、開発環境が増えると設定が億劫になってきました。グローバルな settings.json[2] に設定を写し、億劫さが解消できたのでメモを残します。 結論: ${workspaceFolder} を使用するhttps://code.visualstudio.com/docs/editor/variables-reference前述の VSCode で使用可能な変数の...

ターゲットVue 2 / Nuxt 2 で <script setup> を素振り or 導入したい方 unplugin-vue2-script-setup の紹介VueUse などの開発者である@antfu7さんが開発された、次のプラグインを適用すると Vue2 / Nuxt2 で <script setup> が使用可能となります。https://github.com/antfu/unplugin-vue2-script-setupREADME.mdの通り、次のエコシステムにも対応されています。ViteNuxtVue CLIwebpa...