vue-select を利用すると、リッチなUIのセレクトボックスコンポーネントを作成できます。
See the Pen
Vue Select Template by Jeff (@sagalbot)
on CodePen.
UIは上記のようになります。
今回は、Nuxt.jsでの実装例を紹介したいと思います。
パッケージの導入方法
npmであれば、
|
1 |
$ npm install vue-select |
yarnなら、
|
1 |
$ yarn add vue-select |
で導入できます。
nuxt.config.js の設定
pluginsの値に"@/plugins/vueselect.js"を追加します。
|
1 2 3 4 5 6 7 8 |
export default { mode: 'universal', （省略） plugins: [ "@/plugins/vueselect.js" ], （省略） } |
プラグインファイルを新規作成
pluginsディレクトリの配下に新規でvueselect.jsのファイルを作成します。
内容は以下です。
|
1 2 3 4 5 |
import Vue from 'vue' import vSelect from 'vue-select' import 'vue-select/dist/vue-select.css'; Vue.component('v-select', vSelect) |
v-selectという新しいコンポーネントを定義することで、Vue.jsのプラグインをグローバルに使用することができるようになります。
また、import 'vue-select/dist/vue-select.css';
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div> <h1>Hello world</h1> <v-select v-model="selected" placeholder="Select Category" :options="['foo', 'bar']"></v-select> </div> </template> <script> export default { data() { return { selected: '' } } } </script> |
page/以下のテンプレートファイルに上記のv-selectタグを設定すればOKです。
optionsには配列を設定するようにしてください。
参考
