Vue.jsベースのフレームワーク！ Nuxt3プラグイン《nuxt-easy-lightboxで画像プレビューの簡単実装》

#プログラム #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回はNuxt3で画像のプレビューを表現できる「nuxt-easy-lightbox」についてご紹介します。非常に簡単に画像のプレビューを実現できるので、ぜひご覧ください。

使用するライブラリ

今回は下記ライブラリを使用します。

Vue.js: 3.4.21
Nuxt.js: 3.11.1
nuxt-easy-lightbox: 1.0.2

nuxt-easy-lightboxの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm i nuxt-easy-lightbox

これで対象のプロジェクトに、ライブラリを追加することができました。

次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

nuxt.config.tsファイルへの記載追加

ライブラリを追加したら、「nuxt.config.ts」ファイルの「modules」にライブラリの記載を追加します。

– nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'nuxt-easy-lightbox'← 記載追加
  ],
})

これでライブラリの利用が可能となります。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
<div style="text-align: center;">
    <h1>nuxt-easy-lightbox</h1>
    <div>
      <div
        v-for="(src, index) in imgs"
        :key="index"
        class="pic"
        @click="() => showImg(index)"
      >
        <img :src="src" style="width: 300px;"/>
      </div>
      <VueEasyLightbox
        :visible="visibleRef"
        :imgs="imgs"
        :index="indexRef"
        @hide="onHide"
      />
    </div>
</div>
</template>

<script setup>
const visibleRef = ref(false)
const indexRef = ref(0)

const imgs = [
  "https://amg-official.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2020/05/01140129/nuxt-ic2.jpg",
  "https://amg-official.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2021/07/20152933/feels20210721-ic.jpg",
  "https://amg-official.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2021/06/15213024/oyako2021-ic.jpg"
]

const showImg = (index) => {
  indexRef.value = index
  visibleRef.value = true
}
const onHide = () => (visibleRef.value = false)
</script>

<style>
.pic {
  width: 300px;
  float: left;
  margin-right: 10px;
}
</style>

５行目～１２行目：
プレビューを行える画像の一覧を表示しています。「imgs」の変数に設定されている画像分ループを行い、その画像を「img」タグで表示しています。
ここでの重要ポイントは、@click で「showImg(index)」関数を呼び出し、クリック時にプレビューダイアログを表示するよう設定している点です。

１３行目～１８行目：
プレビュー用のダイアログを表示するコンポーネントとなります。「visible」ではダイアログの表示/非表示、「imgs」では表示する画像の一覧配列を設定し、「index」では、画像一覧のどの画像を表示するか（何番目か）を指定しています。

２４行目～２５行目：
リアクティブな変数として「visibleRef」「indexRef」を宣言し、以降の画像クリック時の関数で、値の変更を行っていきます。

２７行目～３１行目：
表示する画像の一覧を設定しています。

３３行目～３６行目：
画像クリック時に呼び出される関数となります。「indexRef.value = index」で選択された画像の番号を、「visibleRef.value = true」でプレビュー画面の表示を設定しています。「visibleRef」「indexRef」はともにリアクティブ変数のため、即時にプレビュー画面に変更が通知されます。

３７行目：
プレビュー画面を閉じられたときに、ダイアログを非表示にするためのコールバックです。