{"id":15908,"library":"vue-horizontal","title":"Vue Horizontal Layout Component","description":"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.","status":"active","version":"0.8.13","language":"javascript","source_language":"en","source_url":"https://github.com/fuxingloh/vue-horizontal","tags":["javascript","vue","vuejs","nuxt","horizontal","list view","scroll view","airbnb list","typescript"],"install":[{"cmd":"npm install vue-horizontal","lang":"bash","label":"npm"},{"cmd":"yarn add vue-horizontal","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-horizontal","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue.js framework.","package":"vue","optional":false}],"imports":[{"note":"CommonJS `require` is not supported; use ESM imports. Vue 3 users should install `vue-horizontal@next`.","wrong":"const VueHorizontal = require('vue-horizontal');","symbol":"VueHorizontal","correct":"import VueHorizontal from \"vue-horizontal\";"},{"note":"When registering globally, ensure you provide a string name for the component.","wrong":"import Vue from 'vue';\nimport VueHorizontal from 'vue-horizontal';\n\nVue.component(VueHorizontal);","symbol":"VueHorizontal (Global)","correct":"import Vue from 'vue';\nimport VueHorizontal from 'vue-horizontal';\n\nVue.component('VueHorizontal', VueHorizontal);"},{"note":"The package ships with TypeScript types. The primary component props are typically exposed via an interface like `VueHorizontalProps` or similar.","symbol":"Type (Props)","correct":"import type { VueHorizontalProps } from 'vue-horizontal';"}],"quickstart":{"code":"<template>\n  <vue-horizontal responsive>\n    <section v-for=\"item in items\" :key=\"item.title\">\n      <h3>{{ item.title }}</h3>\n      <p>{{ item.content }}</p>\n    </section>\n  </vue-horizontal>\n</template>\n\n<script>\nimport VueHorizontal from \"vue-horizontal\";\n\nexport default {\n  components: {VueHorizontal},\n  data() {\n    return {\n      items: [...Array(20).keys()].map((i) => {\n        return {title: `Item ${i}`, content: `🚀 Content ${i}`};\n      }),\n    }\n  }\n}\n</script>\n\n<style scoped>\nsection {\n  padding: 16px 24px;\n  background: #f5f5f5;\n}\n</style>","lang":"javascript","description":"Demonstrates importing and using VueHorizontal with a v-for loop to render a dynamic list of items."},"warnings":[{"fix":"For Vue 3 projects, use `npm install vue-horizontal@next` or `yarn add vue-horizontal@next`.","message":"Vue 3 compatibility requires installing the `@next` version of the package. The main `vue-horizontal` package currently targets Vue 2.","severity":"breaking","affected_versions":">=0.x"},{"fix":"Check for the presence of `$refs` or use `this.$nextTick` for DOM manipulations. Ensure your SSR environment correctly handles component lifecycle.","message":"When 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.","severity":"gotcha","affected_versions":">=0.8.13"},{"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.","message":"Careful 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.","severity":"gotcha","affected_versions":"<0.8.5"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":"<0.8.11"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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);`.","cause":"The `VueHorizontal` component was not properly registered with Vue, either globally or locally within the component where it's being used.","error":"[Vue warn]: Failed to resolve component: vue-horizontal"},{"fix":"Guard `$refs` access with `if (this.$refs.container)` or defer DOM-dependent logic to `mounted()` lifecycle hook or `this.$nextTick()` callback.","cause":"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.","error":"TypeError: Cannot read properties of null (reading '$refs')"},{"fix":"Use ESM `import` statements: `import VueHorizontal from 'vue-horizontal';`. Ensure your build setup (Webpack, Rollup, Vite) is configured to handle ESM correctly.","cause":"Attempting to import the ESM-only `vue-horizontal` package using CommonJS `require()` syntax in an environment that expects ESM modules.","error":"SyntaxError: Unexpected token 'export' (for require('vue-horizontal'))"}],"ecosystem":"npm"}