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

Vue.js

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

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

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

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

パッケージの導入方法

npmであれば、

yarnなら、

で導入できます。

nuxt.config.js の設定

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

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

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

内容は以下です。

v-selectという新しいコンポーネントを定義することで、Vue.jsのプラグインをグローバルに使用することができるようになります。

また、import 'vue-select/dist/vue-select.css';でcssを読み込んでおきます。

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

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

参考