Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fuxingloh/vue-masonry-wall
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
https://github.com/fuxingloh/vue-masonry-wall
masonry masonry-layout nuxt nuxtjs ssr vue vuejs
Last synced: about 3 hours ago
JSON representation
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
- Host: GitHub
- URL: https://github.com/fuxingloh/vue-masonry-wall
- Owner: fuxingloh
- License: mit
- Created: 2020-01-13T06:06:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-06T10:02:49.000Z (almost 3 years ago)
- Last Synced: 2024-09-18T17:43:39.276Z (6 days ago)
- Topics: masonry, masonry-layout, nuxt, nuxtjs, ssr, vue, vuejs
- Language: Vue
- Homepage: https://nuxt-app.fuxing.dev/vue-masonry-wall
- Size: 9.14 MB
- Stars: 217
- Watchers: 7
- Forks: 31
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-masonry-wall
A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending.
I created this because other libraries has no SSR support, and I needed a pure vue implementation.
* [Live Demo: Image](https://nuxt-app.now.sh/vue-masonry-wall-image) and the [Source](https://github.com/fuxingloh/nuxt-app/blob/0725466dcf2d3d5338573ca7612f38ecd8fa2fa0/components/examples/ExampleMasonryImage.vue)
* [Live Demo: Text](https://nuxt-app.now.sh/vue-masonry-wall) and the [Source](https://github.com/fuxingloh/nuxt-app/blob/0725466dcf2d3d5338573ca7612f38ecd8fa2fa0/components/examples/ExampleMasonry.vue)
[](https://nuxt-app.now.sh/vue-masonry-wall-image)
## Installation
```shell script
npm i vue-masonry-wall
# or yarn
yarn add vue-masonry-wall
```
## Features
* No Direct DOM Manipulation
* SSR friendly, able to load and re hydrate later
* 1 dependency only, no legacy dependencies
* Auto lazy appending, scroll to auto load more
* Auto item placement, will find best column
* Responsive design
## Usage
```vue
```
```js
const items = []
const options = {
width: 300,
padding: {
default: 12,
1: 6,
2: 8
}
}
const append = () => {
// API call and add items
this.items.push(...[])
}
```
### Basic
```vue
Masonry: append endlessly
{{item.title}}
{{item.content}}
import VueMasonryWall from "vue-masonry-wall";
export default {
name: 'app',
components: {VueMasonryWall},
data() {
return {
items: [
{title: 'Item 0', content: 'Content'},
{title: 'Item 1', content: 'Content'},
]
}
},
methods: {
/**
* I am mocking a API call that load 20 objects at a time.
*/
append() {
for (let i = 0; i < 20; i++) {
this.items.push({title: `Item ${this.items.length}`, content: 'Content'})
}
}
}
}
```
### Nuxt SSR
Add `:ssr="{columns: 2}"` to masonry so that during SSR, it will be load in 2 columns.
SSR has no clue what is the size of your height of your element or width of the browser.
You can however guess based on user-agent: https://github.com/nuxt-community/device-module
This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
```vue
{{item.title}}
{{item.content}}
```
## Dependencies
- [vue-observe-visibility](https://github.com/Akryum/vue-observe-visibility) for [IntersectionObserver](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)
## Contributing
For any question or feature request please feel free to create an [issue](https://github.com/fuxingloh/vue-masonry-wall/issues/new) or [pull request](https://github.com/fuxingloh/vue-masonry-wall/pulls).
## TODO
> These were features from my original project that I removed for brevity of this package.
* [ ] [nuxt-community/device-module](https://github.com/nuxt-community/device-module) to detect the browser for better SSR support.
* [ ] [vue-scrollto](https://www.npmjs.com/package/vue-scrollto) to scroll to an item in masonry.
## [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal)
I also maintain another project called [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal).
At its core, Vue Horizontal is an ultra simple pure vue horizontal layout for
modern responsive web with zero dependencies.
Vue Horizontal is also an ultra complex code snippet dossier with over 100 SPA/SSR/SSG friendly recipes for your design needs.
Do check it out, might be useful for you!