Vue.js v3.2（script setup）+ Vuetifyを使用したサンプルSPA作成

2023.11.29

はじめに

今回はVue.jsバージョン2.×系（Options API）で作成していたサンプルSPAをVue.jsバージョン3.2のComposition API（script setup）で作成し、かつ不足していた機能（削除・並び替え・重複保存の防止）を追加し実装を行いました。

https://proto-protocol.main.jp/bookapp

使用技術

vue: 3.2.13
vue-router: 4.0.3
vuetify: 3.4.2
GoogleBooksAPI
WebStorage(LocalStorage)

仕様説明

本SPAは読んだ本および感想をWebStorage(LocalStorage)に記録する読書管理アプリとなっています。

操作方法

１、「検索する」ボタンから本を検索します。
※GoogleBooksAPIを使用しており検索ワードにヒットする本のデータを４０件まで表示します。

２、検索後、対象の本の「＋」ボタンを押下することで編集画面へ遷移します。
編集画面遷移後、感想を入力し「保存する」ボタンを押下することでWebStorage(LocalStorage)に保存されトップページに遷移します。
※「読んだ日」の編集不可問題に関して、現状実装しているvuetifyのスタイル（DatePickers）がv3.×系の場合使用できない(?)不具合があるため、v2.×系にグレードダウンする必要あり。

３、トップページに登録されている本の鉛筆マークを押下することで編集画面へ遷移します。
またマイナス（-）ボタンを押下することで対象の本を削除します。

４、ヘッダー右上の「登録の古い順（デフォルト）」ボタンを押下することでトップページに表示されている本の並び順を変更することができます。

５、ヘッダー右上の「削除する」ボタンを押下後、ポップアップ確認で「OK」をすることでWebStorage(LocalStorage)に保存された本のデータを全て削除します。

作成中詰まった点

Composition APIで「beforeRouteEnter」が使用できない

一覧画面を全て読み込んだ後に本のデータを表示するため「beforeRouteEnter」を使用しようとしたがエラーが発生し使用することができなかった。原因を調べたところ、Vue Router4.x系のナビゲーションガードではVue3のComposition API用に新しくonXXX()形式で新しい関数が用意されていたがbeforeRouteEnterに該当するガードが無いことが判明。
解決策として、編集画面として使用しているコンポーネントのみOptions APIで作成することで対応をいたしました。