Nuxt.jsでTodoList機能を作りながら、Vuetifyの基本を学習。
こちらを参考に、進めています。
https://note.mu/tkugimot/n/n47218fd1eec5
なんとか自力で問題解決できたので、既存のアプリに機能追加する形で動かすことができました。
上記サイトでは、次に、デザインを整えることになります。で、そこではbulmaを使っているのですが、できればあれこれ手を広げたくないので、Vuetifyで作ってみることにします。
全体デザインについて、上記サイトでは、「ヒーロー」というパターンを使っています。「ヒーロー」なんていうデザインのパターンがあるのですね。
簡単にVuetifyでもそんな指定ができたら良いかと思いましたが、そういう名前のものがあるわけではなさそう、かつ、メニュー構造は必要なので、Vuetify公式サイトのレイアウトサンプルから選択することにし、一番基本的な「Baseline」を使ってみることにします。
https://vuetifyjs.com/ja/framework/pre-made-layouts
最初は、部分的に移植しようと思いましたが、それだとレイアウト崩れが発生してしまうため、逆に、いったん、layouts/default.vueを書き換えてしまってから、必要な部分を戻す、という形にしました。
また、Todoの一覧表示のところに関しても、bulmaを使用していると思われるため、そのままではなく、各詳細情報は、v-cardを使用するようにしました。これも、サンプルメージを参考にしてなんとかなったような、なってないようなです。（幅指定がよくわからない・・・）
また、テキスト入力欄も、v-text-fieldを使用して、プレースホルダよりラベル表示の方が面白いと思い、それで作りました。
なお、入力位に自動でイベントを発生させる際に、このやり方だと日本語変換確定のEnterでも反応してしまって本当は良くありません。
下記のサイトに記載の通りですが、今はここは対応保留としておきます。
[Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐhttps://qiita.com/h-orito/items/6d99e2256074132d7867
カードの並べ方等、もう少し綺麗にできたら良いのでしょうが、一旦これで、次に進みます。
