{"id":14964273,"url":"https://github.com/fuxingloh/vue-horizontal","last_synced_at":"2025-04-04T10:09:23.478Z","repository":{"id":52670267,"uuid":"320260676","full_name":"fuxingloh/vue-horizontal","owner":"fuxingloh","description":"An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)","archived":false,"fork":false,"pushed_at":"2023-12-18T02:09:10.000Z","size":11802,"stargazers_count":232,"open_issues_count":33,"forks_count":32,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-28T09:08:32.567Z","etag":null,"topics":["horizontal","horizontal-scrolling","layouts","list-layouts","listview","nuxtjs","spa","ssg","ssr","vue","vue-horizontal","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-horizontal.fuxing.dev","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fuxingloh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-12-10T12:07:38.000Z","updated_at":"2025-03-19T20:44:44.000Z","dependencies_parsed_at":"2023-12-21T16:45:05.838Z","dependency_job_id":"5fdd5962-e733-42d3-8568-1d0aa69e0b6f","html_url":"https://github.com/fuxingloh/vue-horizontal","commit_stats":{"total_commits":91,"total_committers":6,"mean_commits":"15.166666666666666","dds":0.06593406593406592,"last_synced_commit":"beefda2a5744a99dc5fdb5e13aa9c1857bb5a7b1"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fuxingloh","download_url":"https://codeload.github.com/fuxingloh/vue-horizontal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157283,"owners_count":20893220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["horizontal","horizontal-scrolling","layouts","list-layouts","listview","nuxtjs","spa","ssg","ssr","vue","vue-horizontal","vuejs"],"created_at":"2024-09-24T13:32:54.753Z","updated_at":"2025-04-04T10:09:23.455Z","avatar_url":"https://github.com/fuxingloh.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Vue Horizontal](https://vue-horizontal.fuxing.dev) [![vue-horizontal](https://img.shields.io/npm/v/vue-horizontal/latest)](https://www.npmjs.com/package/vue-horizontal) [![vue-horizontal](https://img.shields.io/npm/v/vue-horizontal/next)](https://www.npmjs.com/package/vue-horizontal)\n\nDesigning your web app for a horizontal experience can be tedious and overwhelming if you are new to web development.\nWhile a vertical design comes naturally as html is naturally vertical by design `display:block`.\nWith `display:flex`, aligning your content horizontally becomes natural and intuitive,\nbut it doesn't support overflow or navigation.\nYou start to add more hacks and tricks to get the design you wanted, but those hacks are not consistent and\ncross-browser tested, SSG or SEO friendly.\nYou get the idea.\n\nThere are many libraries already in an open-source world, some using direct DOM manipulation, some importing another\nlegacy JavaScript or JQuery library.\nYou don't want that.\nVue already does that.\nThis is Vue native created for Vue, and only Vue is the peer dependency required.\nAll modes of rendering (SPA/SSR/SSG) are supported and tested with E2E tools.\n\nThe actual library is only about 400 LOC while there are at least 100x more LOC in the documentation, end-to-end testing\nand a bunch of other fun stuff.\n\n#### [DEMO](https://vue-horizontal.fuxing.dev/recipes/cards) • [DOCUMENTATION](https://vue-horizontal.fuxing.dev) • [FEATURES](https://vue-horizontal.fuxing.dev/features)\n\n[![Vue Horizontal](./docs/vue-horizontal.svg)](https://vue-horizontal.fuxing.dev)\n![recipes](recipes.jpg)\n\n## Features and Design Philosophy\n\n- **SSR/SSG/SPA: all modes of rendering supported**\n- Mobile first for the responsive web\n- Customizable navigation: scroll bar, buttons or basically everything\n- UX focused, smooth scrolling, snapping for a variety of use cases.\n- Small size of 3 KB for CDN users\n- Highly extensible for any use case\n  with [well documented recipes](https://vue-horizontal.fuxing.dev/design/principles).\n  - You control how to structure your content with HTML\n  - You control how it looks with CSS\n  - You control how to navigate your layout with Vue.js\n\n## Installation\n\n```shell\n# for Vue 2\nnpm i vue-horizontal\n# for Vue 3\n# migration notes: https://github.com/fuxingloh/vue-horizontal/pull/87\nnpm i vue-horizontal@next \n# or\nyarn add vue-horizontal\n# or via \u003cscript\u003e\nhttps://cdn.jsdelivr.net/npm/vue-horizontal@0.x.x/dist/vue-horizontal.esm.min.js\n```\n\n## Usage\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eImport Locally\u003c/b\u003e\u003c/summary\u003e\n\n```vue\n\u003cscript\u003e\nimport VueHorizontal from \"vue-horizontal\";\n\nexport default {\n  components: {VueHorizontal}\n}\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eImport Globally\u003c/b\u003e\u003c/summary\u003e\n\n```javascript\nimport Vue from 'vue';\nimport VueHorizontal from \"vue-horizontal\";\n\nVue.component(VueHorizontal)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eImport Script\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003c!-- For latest release: https://github.com/fuxingloh/vue-horizontal/releases --\u003e\n\u003cscript src=\"https://unpkg.com/vue-horizontal@0.6.0\"\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n### Using Vue Horizontal\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-horizontal responsive\u003e\n    \u003csection v-for=\"item in items\" :key=\"item.title\"\u003e\n      \u003ch3\u003e{{ item.title }}\u003c/h3\u003e\n      \u003cp\u003e{{ item.content }}\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/vue-horizontal\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueHorizontal from \"vue-horizontal\";\n\nexport default {\n  components: {VueHorizontal},\n  data() {\n    return {\n      // E.g: creates 20 array items...\n      items: [...Array(20).keys()].map((i) =\u003e {\n        return {title: `Item ${i}`, content: `🚀 Content ${i}`};\n      }),\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\nsection {\n  padding: 16px 24px;\n  background: #f5f5f5;\n}\n\u003c/style\u003e\n```\n\n### [More features and examples](https://vue-horizontal.fuxing.dev/features)\n\n- [All features demo](https://vue-horizontal.fuxing.dev/features)\n- [Design: Principles](https://vue-horizontal.fuxing.dev/design/principles)\n- [Design: Responsive](https://vue-horizontal.fuxing.dev/design/responsive)\n- [Design: Navigation](https://vue-horizontal.fuxing.dev/design/navigation)\n- [Design: Scrollbar](https://vue-horizontal.fuxing.dev/design/scrollbar)\n- [Recipes](https://vue-horizontal.fuxing.dev/recipes/about)\n\n## Known Limitations\n\n### [CSS Scroll Behavior: Smooth](https://vue-horizontal.fuxing.dev/limitations#css-scroll-behavior-smooth)\n\nIn Vue Horizontal, smooth scrolling is enabled by default. With `scroll-behavior: smooth`, it enables smooth scrolling\nexperience when scroll event is triggered by programmatic calls. Although this is not a breaking functional feature, it\nprovides a **\"smooth\"** scrolling user experience.\n\nAs of December 2023, there is a 96% cross-browser compatibility.\n\n### [CSS Scroll Snap](https://vue-horizontal.fuxing.dev/limitations#css-scroll-snap)\n\nScroll snap align or scroll-snapping, is a CSS technique that allows customizable scrolling experiences like pagination\nof carousels by setting defined snap positions. Vue Horizontal has it enabled by default to disable you can\nset `\u003cvue-horizontal snap=\"none\"\u003e`.\n\nAs of December 2023, there is a 98% cross-browser compatibility.\n\n## Development\n\nSetup, develop \u0026 test.\n\n```shell\nnpm install # install\nnpm run serve # dev\nnpm run cypress:run # e2e testing\n```\n\n- End-to-end test cases are also written because of the UI nature of this framework.\n  [Cypress](https://www.cypress.io/) is used under the hood.\n- There is also additional integration testing done to ensure SSR and SSG works.\n\n## Contributions\n\n- For any question or feature request, please feel free to create\n  an [issue](https://github.com/fuxingloh/vue-horizontal/issues/new)\n  or [pull request](https://github.com/fuxingloh/vue-horizontal/pulls).\n- For feature request, do check out the examples as some of them might have been implemented.\n\n## Prior art\n\n- [Motivation](https://vue-horizontal.fuxing.dev/#motivation)\n- [vue-horizontal-list](https://github.com/fuxingloh/vue-horizontal-list)\n- [kenwheeler/slick](https://github.com/kenwheeler/slick)\n\nOriginally, this project started out as another project\ncalled [vue-horizontal-list](https://github.com/fuxingloh/vue-horizontal-list). I created the origin project because I\nliked how AirBnb does their horizontal layout. I couldn't find a library that implements it vue natively without relying\non a legacy js/jquery dependency.\n\nThis project is another take on it with an ultra simple implementation that is extensible and moves the responsibility\nto the user rather than the library.\n\n## License\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ffuxingloh%2Fvue-horizontal.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Ffuxingloh%2Fvue-horizontal?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuxingloh%2Fvue-horizontal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuxingloh%2Fvue-horizontal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuxingloh%2Fvue-horizontal/lists"}