vue3-grid-awesome-masonry
v1.0.3
Published
### Usage
Downloads
15
Readme
VUE 3 Grid Awesome Masonry
Usage
<template>
<Container :itemData="itemData" :column="column">
<template #body="{ item }">
<div style="width: 100%; border-radius: 10px; border: 1px solid gray">
<img
:src="item.thumbnail"
style="
width: 100%;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
"
/>
<div style="padding: 8px">
<h1>{{ item.title }}</h1>
<p>{{ item.description }}</p>
<div>price: ${{ item.price }}</div>
</div>
</div>
</template>
</Container>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Container from 'vue3-grid-awesome-masonry'
const column = ref(2)
const itemData = ref([
{
id: 1,
title: 'iPhone 9',
description: 'An apple mobile which is nothing like apple',
price: 549,
discountPercentage: 12.96,
rating: 4.69,
stock: 94,
brand: 'Apple',
category: 'smartphones',
thumbnail: 'https://i.dummyjson.com/data/products/1/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/1/1.jpg',
'https://i.dummyjson.com/data/products/1/2.jpg',
'https://i.dummyjson.com/data/products/1/3.jpg',
'https://i.dummyjson.com/data/products/1/4.jpg',
'https://i.dummyjson.com/data/products/1/thumbnail.jpg',
],
},
{
id: 2,
title: 'iPhone X',
description:
'SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...',
price: 899,
discountPercentage: 17.94,
rating: 4.44,
stock: 34,
brand: 'Apple',
category: 'smartphones',
thumbnail: 'https://i.dummyjson.com/data/products/2/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/2/1.jpg',
'https://i.dummyjson.com/data/products/2/2.jpg',
'https://i.dummyjson.com/data/products/2/3.jpg',
'https://i.dummyjson.com/data/products/2/thumbnail.jpg',
],
},
{
id: 3,
title: 'Samsung Universe 9',
description:
"Samsung's new variant which goes beyond Galaxy to the Universe",
price: 1249,
discountPercentage: 15.46,
rating: 4.09,
stock: 36,
brand: 'Samsung',
category: 'smartphones',
thumbnail: 'https://i.dummyjson.com/data/products/3/thumbnail.jpg',
images: ['https://i.dummyjson.com/data/products/3/1.jpg'],
},
{
id: 4,
title: 'OPPOF19',
description: 'OPPO F19 is officially announced on April 2021.',
price: 280,
discountPercentage: 17.91,
rating: 4.3,
stock: 123,
brand: 'OPPO',
category: 'smartphones',
thumbnail: 'https://i.dummyjson.com/data/products/4/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/4/1.jpg',
'https://i.dummyjson.com/data/products/4/2.jpg',
'https://i.dummyjson.com/data/products/4/3.jpg',
'https://i.dummyjson.com/data/products/4/4.jpg',
'https://i.dummyjson.com/data/products/4/thumbnail.jpg',
],
},
{
id: 5,
title: 'Huawei P30',
description:
'Huawei’s re-badged P30 Pro New Edition was officially unveiled yesterday in Germany and now the device has made its way to the UK.',
price: 499,
discountPercentage: 10.58,
rating: 4.09,
stock: 32,
brand: 'Huawei',
category: 'smartphones',
thumbnail: 'https://i.dummyjson.com/data/products/5/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/5/1.jpg',
'https://i.dummyjson.com/data/products/5/2.jpg',
'https://i.dummyjson.com/data/products/5/3.jpg',
],
},
{
id: 6,
title: 'MacBook Pro',
description:
'MacBook Pro 2021 with mini-LED display may launch between September, November',
price: 1749,
discountPercentage: 11.02,
rating: 4.57,
stock: 83,
brand: 'Apple',
category: 'laptops',
thumbnail: 'https://i.dummyjson.com/data/products/6/thumbnail.png',
images: [
'https://i.dummyjson.com/data/products/6/1.png',
'https://i.dummyjson.com/data/products/6/2.jpg',
'https://i.dummyjson.com/data/products/6/3.png',
'https://i.dummyjson.com/data/products/6/4.jpg',
],
},
{
id: 7,
title: 'Samsung Galaxy Book',
description:
'Samsung Galaxy Book S (2020) Laptop With Intel Lakefield Chip, 8GB of RAM Launched',
price: 1499,
discountPercentage: 4.15,
rating: 4.25,
stock: 50,
brand: 'Samsung',
category: 'laptops',
thumbnail: 'https://i.dummyjson.com/data/products/7/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/7/1.jpg',
'https://i.dummyjson.com/data/products/7/2.jpg',
'https://i.dummyjson.com/data/products/7/3.jpg',
'https://i.dummyjson.com/data/products/7/thumbnail.jpg',
],
},
{
id: 8,
title: 'Microsoft Surface Laptop 4',
description:
'Style and speed. Stand out on HD video calls backed by Studio Mics. Capture ideas on the vibrant touchscreen.',
price: 1499,
discountPercentage: 10.23,
rating: 4.43,
stock: 68,
brand: 'Microsoft Surface',
category: 'laptops',
thumbnail: 'https://i.dummyjson.com/data/products/8/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/8/1.jpg',
'https://i.dummyjson.com/data/products/8/2.jpg',
'https://i.dummyjson.com/data/products/8/3.jpg',
'https://i.dummyjson.com/data/products/8/4.jpg',
'https://i.dummyjson.com/data/products/8/thumbnail.jpg',
],
},
{
id: 9,
title: 'Infinix INBOOK',
description:
'Infinix Inbook X1 Ci3 10th 8GB 256GB 14 Win10 Grey – 1 Year Warranty',
price: 1099,
discountPercentage: 11.83,
rating: 4.54,
stock: 96,
brand: 'Infinix',
category: 'laptops',
thumbnail: 'https://i.dummyjson.com/data/products/9/thumbnail.jpg',
images: [
'https://i.dummyjson.com/data/products/9/1.jpg',
'https://i.dummyjson.com/data/products/9/2.png',
'https://i.dummyjson.com/data/products/9/3.png',
'https://i.dummyjson.com/data/products/9/4.jpg',
'https://i.dummyjson.com/data/products/9/thumbnail.jpg',
],
},
{
id: 10,
title: 'HP Pavilion 15-DK1056WM',
description:
'HP Pavilion 15-DK1056WM Gaming Laptop 10th Gen Core i5, 8GB, 256GB SSD, GTX 1650 4GB, Windows 10',
price: 1099,
discountPercentage: 6.18,
rating: 4.43,
stock: 89,
brand: 'HP Pavilion',
category: 'laptops',
thumbnail: 'https://i.dummyjson.com/data/products/10/thumbnail.jpeg',
images: [
'https://i.dummyjson.com/data/products/10/1.jpg',
'https://i.dummyjson.com/data/products/10/2.jpg',
'https://i.dummyjson.com/data/products/10/3.jpg',
'https://i.dummyjson.com/data/products/10/thumbnail.jpeg',
],
},
])
</script>
Props
| Props | Description | type |
| :--------- | :------------ | :----- |
| itemData | used for data | Array |
| column | columns data | Number |
Screenshot
