参考資料
下記の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'] }) }, }
実行結果