Vue.js | タグ

Vue.js でジェネリックコンポーネントを使う

Vue.js 3.3 から `<script setup>` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができます。

Nuxt Sentryでユーザーフィードバックを受け取る

Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。 Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、このエラーコンポーネントにダイアログを表示させる処理を書いていきます。

Firebase② Firebase Authentication

Firebase第二弾です。 Firebase Authenticationのメールアドレスによるログインと、FireStorageについて説明していきます。

Q：v-for の key に配列のインデックスを使うのは犯罪ですか？#Shorts

結論： - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。

Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 `play()` 関数は Storybook 上でユーザーのインタラクションな操作を表現することができます。以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行することができるようですのでこちらを試してみます。

Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire

Histoireはフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。Vite にネイティブ対応、Vue の SFC 形式で Story を書けるといった特徴があります。

Vuetify 3 Alpha の主な変更点

[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。現在 Vue 3 に対応する Alpha 版の Vuetify 3 が公開されています。開発スケジュールは以下のとおりになっています。

Vue3 コンポーネントのテスト

コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。

Vue2のプロジェクトをVue3へマイグレーションsする

Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？この記事ではVue 2からVue 3への移行手順を記述していきます。

【Vue.js】ref vs reactive

さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨する方法がありませんので、どちらを使用するべきか迷ってしまうところです。 `reactive` と `ref` のそれぞれのメリット・デメリットを確認してみましょう。