Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
vue-horizontal
Advanced tools
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies.
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.
# for Vue 2
npm i vue-horizontal
# for Vue 3
# migration notes: https://github.com/fuxingloh/vue-horizontal/pull/87
npm i vue-horizontal@next
# or
yarn add vue-horizontal
# or via <script>
https://cdn.jsdelivr.net/npm/vue-horizontal@0.x.x/dist/vue-horizontal.esm.min.js
<script>
import VueHorizontal from "vue-horizontal";
export default {
components: {VueHorizontal}
}
</script>
import Vue from 'vue';
import VueHorizontal from "vue-horizontal";
Vue.component(VueHorizontal)
<!-- For latest release: https://github.com/fuxingloh/vue-horizontal/releases -->
<script src="https://unpkg.com/vue-horizontal@0.6.0"></script>
<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>
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 2023, there is a 96% cross-browser compatibility.
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 2023, there is a 98% cross-browser compatibility.
Setup, develop & test.
npm install # install
npm run serve # dev
npm run cypress:run # e2e testing
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.
FAQs
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies.
We found that vue-horizontal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.