vue-select-imageをvue+nuxtに導入

手順

インストール

yarn add vue-select-image

プラグインの追加

plugins/imageselect.js

import Vue from 'vue'
import VueSelectImage from 'vue-select-image'
require('vue-select-image/dist/vue-select-image.css')
Vue.use(VueSelectImage)

nuxt.config.jsの編集：プラグインを追加します。

nuxt.config.js

  plugins: [
    {
      src: '@/plugins/imageselect',
      mode: 'client'
    }
  ],

コード：ちょっとエラーがconsoleに出てきたので、client-onlyで囲むことにより解決しています。

index.vue

<template>
    <client-only>
        <div class="container">
            <vue-select-image
                :data-images="dataImages"
                :is-multiple="false"
                :selected-images="initialSelected"
            />
        </div>
    </client-only>
</template>
 
<script>
 
export default {
  components: {},
  data() {
    return {
      dataImages:[{
        id: '1',
        src: 'https://unsplash.it/200?random',
        alt: 'Alt Image 1'
      }, {
        id: '2',
        src: 'https://unsplash.it/200?random',
        alt: 'Alt Image 2'
      }, {
        id: '2',
        src: 'https://unsplash.it/200?random',
        alt: 'Alt Image 2',
        disabled: true
      }],
      initialSelected: [],
    };
  }
}
</script>
 
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 70px;
}
</style>

こんな感じで表示されます。

参考

ありがとうございました。