At its core, Vue Horizontal is an ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. This is also an ultra complex code snippet dossier with over 100 SPA/SSR/SSG friendly recipes for your design needs.
- SSR/SSG/SPA: all modes of rendering supported
- Mobile first for the responsive web
- Customizable navigation: scroll bar, buttons or programmatic
- Content snapping, to snap to the nearest item after scrolling
- Small size of 3 KB
- Highly extensible for any use case with well documented recipes.
- You control how to structure content with HTML
- You control how it looks with CSS
- You control how to navigate it with Vue.js
npm i vue-horizontal
# or
yarn add vue-horizontal
# or via <script>
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-horizontal.esm.min.js
Import Locally
<script>
import VueHorizontal from "vue-horizontal";
export default {
components: {VueHorizontal}
}
</script>
Import Globally
import Vue from 'vue';
import VueHorizontal from "vue-horizontal";
Vue.component(VueHorizontal)
<template>
<vue-horizontal responsive>
<section v-for="item in items" :key="item.title">
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</section>
</vue-horizontal>
</template>
<script>
import VueHorizontal from "vue-horizontal";
export default {
components: {VueHorizontal},
data() {
return {
// E.g: creates 20 array items...
items: [...Array(20).keys()].map((i) => {
return {title: `Item ${i}`, content: `🚀 Content ${i}`};
}),
}
}
}
</script>
<style scoped>
section {
padding: 16px 24px;
background: #f5f5f5;
}
</style>
In Vue Horizontal, smooth scrolling is enabled by default. With scroll-behavior: smooth, it enables smooth scrolling experience when scroll event is triggered by programmatic calls. Although this is not a breaking functional feature, it provides a "smooth" scrolling user experience.
As of December 2020, there is only a 76% cross browser compatibility. Meantime you should polyfill this feature with more information here. Polyfill should be done by the user, there are no plans to incorporate this natively in the library.
Scroll snap align or scroll-snapping, is a CSS technique that allows customizable scrolling experiences like pagination
of carousels by setting defined snap positions. Vue Horizontal has it enabled by default, to disable you can set
<vue-horizontal :snap="false">
.
In Vue Horizontal, the x-axis scrollbar is hidden by default. Although there isn't a shared specification, most browser has it implemented one way or another. As of December 2020, there is a 99%+ cross browser compatibility.
Setup, develop & test.
npm install # install
npm run serve # dev
npm run cypress:run # e2e testing
- End-to-end test cases are also written because of the UI nature of this framework. Cypress is used under the hood.
- There are also additional integration testing done to ensure SSR and SSG works.
- For any question or feature request please feel free to create an issue or pull request.
- For feature request, do check out the examples as some of them might have been implemented.
- Motivation
- vue-horizontal-list
- kenwheeler/slick
- Airbnb.com
Originally, this project started out as another project called vue-horizontal-list. I created the origin project because I liked how AirBnb does their horizontal layout. I couldn't find a library that implements it vue natively without relying on a legacy js/jquery dependency.
This project is another take on it with an ultra simple implementation that is extensible and moves the responsibility to the user rather than the library.