【Nuxt.js 実装例有り】vue-selectの利用方法

vue-select を利用すると、リッチなUIのセレクトボックスコンポーネントを作成できます。

See the Pen
Vue Select Template by Jeff (@sagalbot)
on CodePen.

UIは上記のようになります。

今回は、Nuxt.jsでの実装例を紹介したいと思います。

パッケージの導入方法

npmであれば、

$ npm install vue-select

yarnなら、

$ yarn add vue-select

で導入できます。

nuxt.config.js の設定

pluginsの値に"@/plugins/vueselect.js"を追加します。

export default {
  mode: 'universal',
  （省略）
  plugins: [
    "@/plugins/vueselect.js"
  ],
（省略）
}

プラグインファイルを新規作成

pluginsディレクトリの配下に新規でvueselect.jsのファイルを作成します。

内容は以下です。

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';でcssを読み込んでおきます。

page/以下のテンプレートファイルに上記のv-selectタグを設定すればOKです。

optionsには配列を設定するようにしてください。

参考

• https://vue-select.org/