nuxtjsにvue-multiselectを適用する

参考資料

• 下記のvue-multiselectをnuxtjsに適用する vue-multiselect.js.org

• 下記のnuxt-vue-multiselectパッケージもあるが、スターが少ないので、やめておく。 github.com

インストール

yarn add vue-multiselect

nuxtjsの設定

• plugins/vue-multiselect.jsファイルを作成して下記のように記述する

import Vue from 'vue'
import Multiselect from 'vue-multiselect'

Vue.component('Multiselect', Multiselect)

• nuxt.config.jsファイルのpluginsに下記の設定をする

  plugins: [
    '@/plugins/vue-multiselect.js'
  ],

コード

• 利用するページで下記をインポートする。下記をインポートしないとCSSが適用されない

import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  data () {
    return ({
      selected: null,
      options: ['PHP','Java','Go','React']
    })
  },
}

実行結果