Using Medium Zoom In Nuxtjs

I find Vuejs amazing for building websites & Nuxtjs helps provide more framework with features like server side rendering out of the box.
It's also really easy to implement vuejs components as plugins.

Implementing medium-zoom #

Sometimes you need to use vue mixins to help implement something.

In order to implement medium-zoom I used mixins with vue lifecycle hooks.

Mixins are a flexible way to distribute reusable functionalities for Vue components.
A mixin object can contain any component options.
When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

In order to understand lifecycle hooks it's worth looking at the Lifecycle Diagram in the Vuejs docs.

Lifecycle Hooks give users the opportunity to add their own code at specific stages.

I'm going to use mounted and updated to run the medium-zoom function whenever the virtualDOM is updated from a change (eg: a user clicks a image to zoom).

Install medium-zoom using yarn or npm

Next create a plugin file

plugins/medium-zoom.js

import Vue from 'vue'
import zoom from 'medium-zoom'
const initZoom = () => {
  zoom('img.zoom:not(.medium-zoom-image)')
}
Vue.mixin({
  mounted: function() {
    initZoom()
  },
  updated: function() {
    initZoom()
  },
})

Now edit nuxt.config.js and add medium-zoom to plugins.

plugins: ['~/plugins/medium-zoom'];

The plugin is setup to use CSS selector for class zoom, so any img elements with this class should now be zoomable.

Optionally you could change this to whatever you like as medium-zoom supports selectors for CSS, HTMLElement, NodeList, Array.

Download #

The medium-zoom nuxtjs plugin can downloaded from github.

Download