vue-selectをnuxtjsに適用する

はじめに

• 下記のライブラリをインストールする github.com

インストール

npm install vue-select

設定

• plugins/vue-select.jsファイルを作成する

import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);

• nuxt.config.jsファイルのpluginsに下記の記述を追加する

  plugins: ['@plugins/vue-select'],

組み込み

• pages/index.vueファイルに下記の記述を追加する

<template>
<v-select id="vselect" v-model="selected" placeholder="Select Category" :options="options"></v-select>
</template>

<script>
import "vue-select/dist/vue-select.css";

export default {
  middleware: 'privatepage',
  data: () => ({
    selected: '',
    options: ["Hoge","Geho","HogeHoge"],
  }),
(省略)
<script>