以下の内容はhttps://px-wing.hatenablog.com/entry/2021/02/05/065258より取得しました。


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']
    })
  },
}

実行結果

f:id:PX-WING:20210205010900p:plain




以上の内容はhttps://px-wing.hatenablog.com/entry/2021/02/05/065258より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14