Fuxing Loh

Dec 30, 2020(3 years ago)

Vue Horizontal (vue2 & vue3 library)


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


Check it out at https://vue-horizontal.fuxing.dev