Registry / web-framework / vue-horizontal

vue-horizontal

JSON →
library0.8.13jsnpmunverified

Vue Horizontal is a dedicated Vue.js component designed to simplify the creation of horizontal, scrollable layouts for modern responsive web applications. It offers a pure Vue-native solution, avoiding direct DOM manipulation or external legacy JavaScript libraries, requiring only Vue as a peer dependency. The library explicitly supports all rendering modes including Single Page Applications (SPA), Server-Side Rendering (SSR), and Static Site Generation (SSG), with comprehensive end-to-end testing. Currently stable at version 0.8.13, it primarily supports Vue 2, while a Vue 3 compatible version is available under the `@next` tag. The project maintains an active release cadence, with frequent bug fixes and maintenance updates. Key differentiators include its lightweight footprint (approximately 3 KB on CDN), mobile-first design philosophy, customizable navigation options, and high extensibility, granting developers full control over HTML structure, CSS styling, and interaction logic to achieve desired UX patterns like smooth scrolling and snapping.

web-framework
npm install vue-horizontal
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-HORIZONTAL
V
vue-horizontal
web-frameworkjavascriptv0.8.13
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueHorizontal
✓ import VueHorizontal from "vue-horizontal";
✗ const VueHorizontal = require('vue-horizontal');
CommonJS `require` is not supported; use ESM imports. Vue 3 users should install `vue-horizontal@next`.
VueHorizontal (Global)
✓ import Vue from 'vue'; import VueHorizontal from 'vue-horizontal'; Vue.component('VueHorizontal', VueHorizontal);
✗ import Vue from 'vue'; import VueHorizontal from 'vue-horizontal'; Vue.component(VueHorizontal);
When registering globally, ensure you provide a string name for the component.
Type (Props)
✓ import type { VueHorizontalProps } from 'vue-horizontal';
The package ships with TypeScript types. The primary component props are typically exposed via an interface like `VueHorizontalProps` or similar.

Demonstrates importing and using VueHorizontal with a v-for loop to render a dynamic list of items.

<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 { items: [...Array(20).keys()].map((i) => { return {title: `Item ${i}`, content: `🚀 Content ${i}`}; }), } } } </script> <style scoped> section { padding: 16px 24px; background: #f5f5f5; } </style>
Debug
Known issues
breakingVue 3 compatibility requires installing the `@next` version of the package. The main `vue-horizontal` package currently targets Vue 2.
fix
For Vue 3 projects, use `npm install vue-horizontal@next` or `yarn add vue-horizontal@next`.
affects: >=0.x
gotchaWhen using Server-Side Rendering (SSR), ensure that DOM-dependent operations (like accessing `$refs.container` children) are properly guarded or performed only client-side to prevent errors during the server build process.
fix
Check for the presence of `$refs` or use `this.$nextTick` for DOM manipulations. Ensure your SSR environment correctly handles component lifecycle.
affects: >=0.8.13
gotchaCareful consideration of CSS styling is required, especially for the last child element within the horizontal layout. Previous versions had specific fixes related to margins on the last child that could cause layout inconsistencies.
fix
Ensure your custom CSS does not override critical layout properties applied by the component. Refer to the documentation's design principles for best practices.
affects: <0.8.5
gotchaThe `refresh` callback was previously mandatory but has been made optional. If you're using an older version or encountering issues with `refresh`, ensure your implementation aligns with the expected API.
fix
Update to the latest `0.8.x` version to ensure `refresh` callback optionality. Check documentation for the current `refresh` signature if manually calling it.
affects: <0.8.11
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: vue-horizontal
The `VueHorizontal` component was not properly registered with Vue, either globally or locally within the component where it's being used.
fix
Ensure `import VueHorizontal from 'vue-horizontal';` is present and the component is added to `components: { VueHorizontal }` in your Vue component or globally via `Vue.component('VueHorizontal', VueHorizontal);`.
TypeError: Cannot read properties of null (reading '$refs')
This error often occurs in SSR environments or when attempting to access a `$ref` before the component has been mounted and the DOM element is available.
fix
Guard `$refs` access with `if (this.$refs.container)` or defer DOM-dependent logic to `mounted()` lifecycle hook or `this.$nextTick()` callback.
SyntaxError: Unexpected token 'export' (for require('vue-horizontal'))
Attempting to import the ESM-only `vue-horizontal` package using CommonJS `require()` syntax in an environment that expects ESM modules.
fix
Use ESM `import` statements: `import VueHorizontal from 'vue-horizontal';`. Ensure your build setup (Webpack, Rollup, Vite) is configured to handle ESM correctly.
Upgrade
Version history
0.8.13latest on npm
Audit
Dependencies
vuerequiredPeer dependency for the Vue.js framework.
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/fuxingloh/vue-horizontal ↗
packagehttps://www.npmjs.com/package/vue-horizontal ↗
vue-horizontal — npm install vue-horizontal · libregistry