ひびのログ

日々ではないけどログを出力していくブログ

Vue.js

script setup の書き方

せっかく作ったので供養。 書き方 前提 Vue.js 3.4 以上 コード <script setup lang="ts" generic="T"> import { ref } from 'vue' // 子コンポーネント読み込み import ChildComponent from 'ChildComponent' // options defineOptions({ inheritAttrs: false }) // ---------------------------…

Vue.js + dialog 要素で使いやすいモーダルダイアログ

使いやすい(個人の感想)(人による) 考えたこと せっかく <dialog> があるので使いたい props に boolean を渡したらダイアログが開閉する もちろんモーダルで テキストだけ設定すれば使えるようにしたい フォームなどを表示できるように slot も渡せるようにした</dialog>…

フロントエンド開発の流れ

フロントエンドのコードをいじるときは、だいたいこういう流れでやるとよさそうというのを書いたものです。 あくまで「自分はこう思う」という一例です。 特にフロントエンド開発をするとき固有の事情について記載してあります。 フレームワークは Vue.js で…

Vue.js 3.0 で追加される Composition API をさっと舐めてみた

Vue.js 3.0 で最も大きい変更である Composition API を使えるので使ってみたので、その感想をまとめてみた。

@vue/test-utils で「<Component name> has been modified to ensure it has the correct instance properties」と言われた時

前置き Vue.js + JavaScript 環境に TypeScript を導入しようとしたときの話です。 コンポーネントを TypeScript 化してコンパイルはでき、テスト(Jest)が通るか確かめたときの話です。 前置き やったこと バージョン エラー内容 なぜこのメッセージが表示…

ESLint が一部設定されている JS + Vue.js プロジェクトに Prettier を導入しようとしてハマった

TL;DR eslint-plugin-vue を導入してから Prettier を入れないと、変な風にフォーマットされることがあるよ。 TL;DR 背景 Prettier を導入したい! 導入方法 1. Prettier を実行してから ESLint を実行 2. ESLint と同時に Prettier を実行 地獄 どうしてこ…

Vue.js でアクセシビリティを考慮したダイアログのフォーカス移動を考えてみた

UI フレームワーク等ではすでに対応しているかもしれませんが、自分でも作ってみました。 リポジトリ github.com src/App.vue : 親コンポーネント src/components/MyDialog.vue : ダイアログ本体 サンプル https://tee-talog.github.io/vue-dialog-focus/ 背…