vue-horizontal

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.

View Demo View Github

Features and Design Philosophy

  • 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

Installation

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

Usage

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)

Using Vue Horizontal

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

GitHub