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

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

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

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

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

1 パッケージの導入方法
2 nuxt.config.js の設定
3 プラグインファイルを新規作成
4 参考

パッケージの導入方法

npmであれば、

$ npm install vue-select

1	$ npm install vue-select

yarnなら、

$ yarn add vue-select

1	$ yarn add vue-select

で導入できます。

nuxt.config.js の設定

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

export default {
  mode: 'universal',
  （省略）
  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)

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


<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>