@rhapsodic/nuxt-vuewer

Image viewer for your Nuxt️ project

Features

• 💪  Type safe integration of Vuewer into your project
• ✨  Viewing multiple or a single image
• 🕹️  A useVuewer() composable to access all of vuewer methods.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @rhapsodic/nuxt-vuewer

That's it! You can now use Vuewer in your Nuxt app ✨

Usage

<script setup>
const { open, close, isOpened } = useVuewer({
  images: [
    {
      url: 'https://placehold.net/2.png',
      thumbUrl: 'https://placehold.net/2-240x160.png',
    },
    'https://placehold.net/5-600x800.png',
    {
      url: 'https://placehold.net/7-600x800.png',
      thumbUrl: 'https://placehold.net/7-240x160.png',
    },
  ],
})

watch(isOpened, (newState) => {
  console.log(`Vuewer state: ${newState ? 'opened' : 'closed'}`)
})
</script>

<template>
  <div>
    <button @click="open">
      Open Vuewer
    </button>
  </div>
</template>

images supports both raw strings and objects with thumbnail overrides: string | { url: string, thumbUrl?: string }.

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

License

MIT License