フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

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>