Working Nuxt3 example - add to README.md or separate page?

[hartmut-co-uk]

Hi, I have a working nuxt3 integration I wanted to share. It's been implemented as a nuxt plugin.

1. install medium-zoom

   yarn add --dev medium-zoom

2. Add following client side (file name suffix .client.(ts|js)) plugin: ./plugins/medium-zoom.client.ts

import { defineNuxtPlugin } from '#app'
import mediumZoom, { Zoom } from 'medium-zoom'

export default defineNuxtPlugin((nuxtApp) => {
  const selector = '[data-zoomable]'
  const zoom: Zoom = mediumZoom(selector, {})

  // (re-)init for newly rendered page, also to work in SPA mode (client-side routing)
  nuxtApp.hook('page:finish', () => {
    zoom.detach(selector)
      .attach(selector)
  })

  // make available as helper to NuxtApp 
  nuxtApp.provide('mediumZoom', zoom)
})

Now for each page rendered / client-side navigated to, medium-zoom is applied accordingly for all images in the DOM with chosen selector.

Would a PR be welcome adding above example integration to README file (or on a separate referenced .md page)?

[hartmut-co-uk]

I published a blog post covering this: https://thriving.dev/blog/nuxt3-plugin-medium-zoom

I'll close this issue, please feel free to reopen it.