Nuxt Gallery

A gallery library for nuxt with a modern design and automatic image optimisation.

How it works:

On compile time the images of the gallery get automatically resized and reencoded.

It encodes the images in webp, the modern image standard for the web, and jpg, so everything works on old browsers too. It also creates multiple resolution of the image (in both webp and jpg).

When the client loads the gallery the browser decides wich image resolution best fits.
Brosers decide this by factors like: Screen Resolution, Network Speed, Baterry Level, Data Saving Mode, Data Caps ...

Because of these optimisations the images will look great on PCs, Tablets and Phones regardless of the resolution.

When a image gets clicked the full resolution version gets loaded and displayed as big as possible (depends on the screen size).

If you have to include the author of the image, because of the license you can do that with the data-source parameter.
It will show the author on the bottom of the screen when the user clicks on the image.

Demo

Installation:

Run:

npm install nuxt-gallery

And integrate this into your nuxt.config.js:

buildModules: [
  '@aceforth/nuxt-optimized-images'
],

Usage:

<script>
  import Gallery from 'nuxt-gallery/src/Gallery.vue'
  import GalleryImage from 'nuxt-gallery/src/GalleryImage.vue'
  
  export default {
    components: {
      Gallery,
      GalleryImage
    }
  }
</script>
<template>
  <gallery>
    <galleryImage src="demo_1.jpg" alt="Forest" data-source="Made by: ___" />
    <galleryImage src="demo_2.jpg" alt="Flowers" />
  </gallery>
</template>

Screenshots: