All Projects → fuxingloh → Vue Horizontal

fuxingloh / Vue Horizontal

Licence: mit
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)

Projects that are alternatives of or similar to Vue Horizontal

Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-28%)
Mutual labels:  nuxtjs, ssr, spa
Awes Io
Awes.io // boilerplate based on Vue, Nuxt, TailwindCSS plus Laravel as a backend. 🤟
Stars: ✭ 599 (+698.67%)
Mutual labels:  ssr, spa
Sitemap Module
Sitemap Module for Nuxt
Stars: ✭ 539 (+618.67%)
Mutual labels:  nuxtjs, ssr
Hoppscotch
👽 Open source API development ecosystem https://hoppscotch.io
Stars: ✭ 34,569 (+45992%)
Mutual labels:  nuxtjs, spa
Miox
Modern infrastructure of complex SPA
Stars: ✭ 374 (+398.67%)
Mutual labels:  ssr, spa
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+5721.33%)
Mutual labels:  ssr, spa
Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+840%)
Mutual labels:  nuxtjs, ssr
React Storefront
React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]).
Stars: ✭ 292 (+289.33%)
Mutual labels:  ssr, spa
Nuxt Static Render
Nuxt module for SSR without rehydration payload
Stars: ✭ 32 (-57.33%)
Mutual labels:  nuxtjs, ssr
Quench Vue
Simple, client-side hydration of pre-rendered Vue.js apps
Stars: ✭ 71 (-5.33%)
Mutual labels:  ssr, spa
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-48%)
Mutual labels:  nuxtjs, ssr
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+5268%)
Mutual labels:  ssr, spa
Nuxt Ssr
✨vue+nuxt+sass+node+express+MongoDB 实现的SSR项目。
Stars: ✭ 323 (+330.67%)
Mutual labels:  nuxtjs, ssr
Nuxt Firebase Sns Example
Nuxt v2 & Firebase(Hosting / Functions SSR / Firestore), Google Auth SNS Example.
Stars: ✭ 485 (+546.67%)
Mutual labels:  nuxtjs, ssr
Blog Front
blog-front @nuxt
Stars: ✭ 305 (+306.67%)
Mutual labels:  nuxtjs, ssr
Wemake Vue Template
Bleeding edge vue template focused on code quality and developer happiness.
Stars: ✭ 645 (+760%)
Mutual labels:  nuxtjs, ssr
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (+280%)
Mutual labels:  ssr, spa
Ice
🚀 The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
Stars: ✭ 16,961 (+22514.67%)
Mutual labels:  ssr, spa
Laravel Nuxt
A Laravel-Nuxt starter kit.
Stars: ✭ 943 (+1157.33%)
Mutual labels:  ssr, spa
Virapro.ru
[E-commerce] Plumbing Store
Stars: ✭ 45 (-40%)
Mutual labels:  nuxtjs, ssr

chrome firefox edge SSR SSG License MIT FOSSA Status

Vue Horizontal vue-horizontal vue-horizontal

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.

DEMODOCUMENTATIONFEATURES

Vue Horizontal 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 variety of use case.
  • 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

# for Vue 2
npm i vue-horizontal
# for Vue 3
# migration notes: https://github.com/fuxingloh/vue-horizontal/pull/87
npm i [email protected] 
# 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)
Import Script
<!-- For latest release: https://github.com/fuxingloh/vue-horizontal/releases -->
<script src="https://unpkg.com/[email protected]"></script>

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>

More features and examples

Known Limitations

CSS Scroll Behavior: Smooth

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 (88% if you include Safari experimental feature flag). Meantime you should polyfill this feature with more information provided here. Polyfill should be done by the user, there are no plans to incorporate this natively in the library.

CSS Scroll Snap

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="none">.

As of December 2020, there is a 94%+ cross browser compatibility. You can choose to polyfill this, but it's more of an aesthetic feature rather than a breaking functional requirement.

Development

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.

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

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

FOSSA Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].