Vue Horizontal  

Designing your web app for a horizontal experience can be tedious and overwhelming if you are new to web development.
While a vertical design comes naturally as html is naturally vertical by design display:block.
With display:flex, aligning your content horizontally becomes natural and intuitive,
but it doesn't support overflow or navigation.
You start to add more hacks and tricks to get the design you wanted, but those hacks are not consistent and
cross-browser tested, SSG or SEO friendly.
You get the idea.

There are many libraries already in an open-source world, some using direct DOM manipulation, some importing another
legacy JavaScript or JQuery library.
You don't want that.
Vue already does that.
This is Vue native created for Vue, and only Vue is the peer dependency required.
All modes of rendering (SPA/SSR/SSG) are supported and tested with E2E tools.

The actual library is only about 400 LOC while there are at least 100x more LOC in the documentation, end-to-end testing
and a bunch of other fun stuff.

#### DEMO • DOCUMENTATION • FEATURES

!recipes

Features and Design Philosophy

- SSR/SSG/SPA: all modes of rendering supported
- Mobile first for the responsive web
- Customizable navigation: scroll bar, buttons or basically everything
- UX focused, smooth scrolling, snapping for a variety of use cases.
- Small size of 3 KB for CDN users
- Highly extensible for any use case
with well documented recipes.
- You control how to structure your content with HTML
- You control how it looks with CSS
- You control how to navigate your layout with Vue.js

Installation

``shell


for Vue 2

or via
`

Import Globally

`javascript
import Vue from 'vue';
import VueHorizontal from "vue-horizontal";

Vue.component(VueHorizontal)
`

Import Script

`html


`

$3

`vue



`

$3

- All features demo
- Design: Principles
- Design: Responsive
- Design: Navigation
- Design: Scrollbar
- Recipes

Known Limitations

$3

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 2023, there is a 96% cross-browser compatibility.

$3

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 .

As of December 2023, there is a 98% cross-browser compatibility.

Development

Setup, develop & test.

`shell
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 is also additional integration testing done to ensure SSR and SSG works.

Contributions

- 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.

Prior art

- Motivation
- vue-horizontal-list
- kenwheeler/slick

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.

License