月: 2020年11月

vue-simple-suggestでテキスト入力候補を表示するサジェスト機能を実装する方法を紹介します。 vue-simple-suggestのインストール・設定 サジェスト機能を実装するためにvue-simple-suggestをインストールします。 [crayon-67169c6b4e402796575571/] vue-simple-suggestを使用するためにplugins配下にvue-simple-suggest.jsファイルを生成して、componentで使えるようにしておきます。 ・plugins/vue-simple-suggest.js [crayon-67169c6b4e405065712337/] nuxt.config.jsのpluginsに作成したファイルのパスを追記します。 ・nuxt.config.js [crayon-67169c6b4e406325821615/] vue-simple-suggestでサジェスト機能を実装 実際にvue-simple-suggestでサジェスト機能を実装していきます。まずはサジェストを表示するための検索機能のHTMLを書いていきます。 今回はinputに入力するとサジェスト候補に一致したキーワードがinputの下に表示されるように実装します。 入力するクエリによって表示するサジェストをフィルタリングするためにfilter-by-queryオプションをtrueにしています。表示させるサジェストの最大候補数なども変更できるので、詳しくはこちらの公式を参考にしてください。 参考：https://github.com/KazanExpress/vue-simple-suggest#emitted-events 入力候補はdivタグ内のspanタグのsuggestionに表示されます。クリックするとinputに表示されます。 ・components/search.vue [crayon-67169c6b4e407654997645/] getSuggestionListsでサジェスト候補のリストを取得しています。 あらかじめstoreにセットされたデータを使います。今回は都道府県ごとの観光カテゴリをサジェストで表示させます。 ・components/search.vue [crayon-67169c6b4e408544211365/] 実際に動かしてみると、以下のようにサジェストが表示されていることが確認できます。

月: 2020年11月

Firebase + Nuxt.jsを使ったGoogleアカウント認証を実装する

SPA、SSR、Jamstackそれぞれの違いや仕組み、特徴まとめ

vue-simple-suggestでサジェスト機能を実装する方法