@rhapsodic/nuxt-vuewer

Nuxt module for @rhapsodic/vuewer library.

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 @rhapsodic/vuewer in your Nuxt app through this module.

Configuration

Both module options are enabled by default:

export default defineNuxtConfig({
  vuewer: {
    css: true,
    autoImport: true,
  },
})

• css: injects @rhapsodic/vuewer/style.css into the Nuxt app.
• autoImport: registers useVuewer() as a Nuxt auto-import.

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