Introduction

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.

Features

SSR/SSG/SPA: all modes of rendering supported
Mobile & responsive web friendly
Scroll bar or customizable button navigation
Snap to the nearest item when scrolling
Moves the responsibilities of the CSS to the user
Extensible for any use case with a collection of recipes.
End-to-end tested on all major browser at code merge with 240+ test cases.

Getting started

You can display content horizontally just as you would vertically with any HTML elements.

  • Any HTML structure works, you can mix and match them up.
  • Use v-for and/or v-if with any div or component
  • Navigation left, right button will automatically appear if there are any items overflowing
  • Trackpad and touch scrolling will work as expected.

HTML

Can be just any HTML declaration

1

v-for

2

v-for

3

v-for

Navigation Button

The navigation button will appear if there is an overflow.

Scroll

You can just trackpad to scroll still!

Touch screen

Touch screen works too!

GettingStarted.vueimport=index-getting-started.vue
<template>
  <vue-horizontal>
    <div class="item">
      <h3>HTML</h3>
      <p>Can be just any HTML declaration</p>
    </div>
    <section v-for="i in items" :key="i">
      <h3>{{ i }}</h3>
      <p>v-for</p>
    </section>
    <section>
      <h3>Navigation Button</h3>
      <p>The navigation button will appear if there is an overflow.</p>
    </section>
    <section>
      <h3>Scroll</h3>
      <p>You can just trackpad to scroll still!</p>
    </section>
    <section>
      <h3>Touch screen</h3>
      <p>Touch screen works too!</p>
    </section>
  </vue-horizontal>
</template>

<script>
// Depending on how you installed it, import it if required.
// import VueHorizontal from 'vue-horizontal';

export default {
  // components: {VueHorizontal},
  data() {
    return {items: [1, 2, 3]}
  },
}
</script>

<style scoped>
section,
.item {
  background: #f3f3f3;
  padding: 16px 24px;
  margin-right: 24px;
  border-radius: 4px;
}
</style>

Motivation

TLDR: In 2017, I liked how AirBnb does their horizontal design. Couldn't find a library for Vue.

Designing your web app for a horizontal experience can 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 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.

Vue Horizontal is not just a library, it's a place for everything horizontal. Built for the Vue community. With over 100 crafted recipes of design choices and control mechanisms ready for your needs.

Also, originally this project started out as another project called vue-horizontal-list.