Nuxt3でvue-selectを入れたときのメモ

初心者エンジニアの僕がnuxt3の練習中にvue-selectを使おうと思ったが、苦戦したので調べて動いた結果をメモ。

nuxt.js => 3.6.5
vue-select => 4.0.0-beta.6

追加したファイル・コード

Pluginディレクトリ

Plugins/vue-select.js 　を作る

Plugins/vue-select.js 　

import vSelect from 'vue-select';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('v-select', vSelect);
})

nuxt.config.ts

nuxt.config.ts

export default defineNuxtConfig({
    css: ['vue-select/dist/vue-select.css'],
})

※cssがもとからある場合は、[]の中に,区切りで'vue-select/dist/vue-select.css'を追加する。

app.vue

app.vue

<template>
    <v-select :options="['a', 'b', 'c']"></v-select>
</template>

vue-select自体の書き方はこちらを参考
▶参考