Introduction

Features

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.

<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 nature and initiative 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 build for Vue, and only Vue is the 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.