vuejs-grid-zoom v0.2.3

VueJS GridZoom

VueJS 3 GridZoom wrapper for codrops/GridZoom

This component adds a few features like color-filled, HTML and component cells.

:warning: Disclaimer :warning: I'm not the author of the original script. I've created this wrapper so it can be easily implemented on Vue.js files.

Using

1. Add import {GridZoom} from 'vuejs-grid-zoom' and @import 'vuejs-grid-zoom/dist/style.css'; to your .vue file;
2. Create the cell mapping. You can check out an example below on how to do that

Sample:

<script setup lang="ts">
import {GridZoom} from 'vuejs-grid-zoom'
import {OtherComponent} from 'other-component'

const cells = [
  {
    type: 'image',
    position: 'c1-r1',
    padded: true,
    title: 'Title goes here',
    text: '<p>HTML for the internal content goes here</p>',
    link: '#',
    linkText: 'Click here',
    image: 'https://placehold.co/450x275'
  },
  {
    type: 'image',
    position: 'c3-r2',
    padded: true,
    title: 'Another title',
    text: '<p>HTML for the internal content goes here</p>',
    link: '#',
    linkText: 'Click here',
    image: 'https://placehold.co/450x275'
  },
  {
    type: 'html',
    position: 'c4-r2',
    html: "<h1>HTML type cell</h1>"
  },
  {
    type: 'image',
    position: 'c2-r3',
    padded: true,
    title: 'Title goes here',
    text: '<p>HTML for the internal content goes here</p>',
    link: '#',
    linkText: 'Click here',
    image: 'https://placehold.co/450x275'
  },
  {
    type: 'filled',
    position: 'c3-r3',
    padded: true,
    color: '#32BFE5'
  },
  {
    type: 'image',
    position: 'c3-r4',
    padded: true,
    title: 'Title goes here',
    text: '<p>HTML for the internal content goes here</p>',
    link: '#',
    linkText: 'Click here',
    image: 'https://placehold.co/450x275'
  },
  {
    type: 'filled',
    position: 'c3-r5',
    color: '#2B85F8',
    padded: true
  },
  {
    type: 'image',
    position: 'c2-r5',
    padded: true,
    title: 'Title goes here',
    text: '<p>HTML for the internal content goes here</p>',
    link: '#',
    linkText: 'Click here',
    image: 'https://placehold.co/450x275'
  },
]
</script>

<template>
<GridZoom :cells="cells"/>
</template>

<style>
@import 'vuejs-grid-zoom/dist/style.css';
</style>

Cell options

Important

This component supports grids up to 4x5. If you need bigger grids, you can extend it creating classes for the extra cells, like this:

.grid__cell-c2-r6 { // column 2, row 6
    grid-column: 4;
    grid-row: 6;
}

This component uses the GSAP library, which is free for most use cases, but there is cases when you'll need a business license. You can see details here