chore: add nuxt3 demo

demos/nuxt3-demo/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

demos/nuxt3-demo/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

demos/nuxt3-demo/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

demos/nuxt3-demo/nuxt.config.ts

@@ -0,0 +1,6 @@
+import { defineNuxtConfig } from 'nuxt'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+
+})

demos/nuxt3-demo/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "nuxt": "3.0.0-rc.4"
+  },
+  "dependencies": {
+    "vue-easy-lightbox": "^1.5.0"
+  }
+}

demos/nuxt3-demo/pages/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="container">
+    <div class="gallery">
+      <div
+        v-for="(img, idx) in imgs"
+        :key="idx"
+        class="pic"
+        @click="() => onShow(idx)"
+      >
+        <img :src="img.src ? img.src : img" />
+      </div>
+    </div>
+
+    <client-only>
+      <vue-easy-lightbox
+        :visible="visibleRef"
+        :index="indexRef"
+        :imgs="imgs"
+        @hide="onHide"
+        @on-prev="onPrev"
+        @on-next="onNext"
+      />
+    </client-only>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue'
+
+// import VueEasyLightbox from 'vue-easy-lightbox'
+
+/**
+ * register component here or /plugins/vue-easy-lightbox.client.ts
+ **/
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    // VueEasyLightbox
+  },
+  setup() {
+    const visibleRef = ref(false)
+    const indexRef = ref(0)
+    const imgs = reactive([
+      'https://via.placeholder.com/250.png/09f/fff?text=first+img',
+      'https://via.placeholder.com/250.png/09f/fff?text=second+img',
+      'https://via.placeholder.com/250.png/09f/fff?text=third+img'
+    ])
+
+    const onPrev = (oldIndex: number, newIndex: number) => {
+      console.log('when next btn click ----')
+      console.log('oldIndex of imgs:', oldIndex)
+      console.log('newIndex of imgs:', newIndex)
+    }
+    const onNext = (oldIndex: number, newIndex: number) => {
+      console.log('when next btn click ----')
+      console.log('oldIndex of imgs:', oldIndex)
+      console.log('newIndex of imgs:', newIndex)
+
+      if (newIndex === imgs.length - 1) {
+        addImg()
+      }
+    }
+
+    const onShow = (index: number) => {
+      indexRef.value = index
+      visibleRef.value = true
+    }
+    const onHide = () => (visibleRef.value = false)
+
+    const addImg = () => {
+      imgs.push('https://via.placeholder.com/250.png/00a26e/fff?text=new+img')
+    }
+
+    return {
+      onShow,
+      onHide,
+      onPrev,
+      onNext,
+      indexRef,
+      visibleRef,
+      imgs
+    }
+  }
+})
+</script>
+
+<style scoped>
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.gallery {
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pic {
+  cursor: pointer;
+  margin-right: 8px;
+}
+</style>

demos/nuxt3-demo/plugins/vue-easy-lightbox.client.ts

@@ -0,0 +1,6 @@
+// install as plugin
+import VueEasyLightbox from 'vue-easy-lightbox'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueEasyLightbox)
+})

demos/nuxt3-demo/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}