Web development has evolved in many ways over recent years. This can be attributed to the development of a number of new industry standards such as CSS Grid Layout and Flexbox along with the introduction of popular JavaScript frameworks like React, Vue, and Angular. Each framework brings its own set of tools for building layouts for modern web applications.
When it comes to web layout, the layout system is the core of any web application, and it’s what allows the flow of information to be presented in unique ways to your users. In this article, I’m going to cover some of the best layout components and libraries for Vue.js applications. Let me tell you that these days the demand for Vue.js developers is going up sharply and thus, it’s become really important to know your way around the most appropriate layout components and libraries.
Originally published June 19 2022, updated Spe 09 2025
1. Draggable And Resizable Grid Layout For Vue.js
A Vue.js component for create a draggable and resizable grid layout.
Features
- Draggable widgets
- Resizable widgets
- Static widgets
- Bounds checking for dragging and resizing
- Widgets may be added or removed without rebuilding grid
- Layout can be serialized and restored
- Automatic RTL support (resizing not working with RTL on 2.2.0)
- Responsive
2. Vue.js Directive For Masonry Library
A Vue.js 2/3 directive for Masonry inspired blocks layouting.
3. Draggable & Resizable Grid Layout For Vue 3
A responsive, draggable, and resizable grid layout system for Vue 3. Inspired by React Grid Layout.
- Draggable widgets
- Resizable widgets
- Static widgets
- Bounds checking for dragging and resizing
- Widgets may be added or removed without rebuilding grid
- Layout can be serialized and restored
- Automatic RTL support
- Responsive
4. Horizontal Scroller Layout For Vue
This is the upgraded version of the horizontal-list component that helps developers generate a horizontal scroller for showcasing anything.
Features:
- SSR/SSG/SPA: all modes of rendering supported
- Mobile & responsive web friendly
- Scroll bar or customizable button navigation
- Snap to the nearest item when scrolling
- Moves the responsibilities of the CSS to the user
- Extensible for any use case with a collection of recipes
- End-to-end tested on all major browser at code merge with 240+ test cases
5. vue-ts-responsive-grid-layout
A draggable, resizable and responsive grid layout, developed with vue3 and typescript.
6. Dynamic Masonry Layout For Vue – flex-waterfall
A Vue.js layout library to generate a dynamic, fluid, Masonry style grid layout for modern web applications.
7. vue-resizable-panels
An intuitive resizable panel groups/layouts components for Vue.
Conclusion:
In this article, we listed the 9 best layout components in Vue.js available on the market. As with other related components and libraries, you can also make use of many of these components in both commercial products and personal projects. We hope this list will be helpful for people who are interested in using Vue for their front-end development projects.
If you have some cool experience with any of them, or if you know a great one that is not mentioned in this post, please share it with us and let us know so that we can include it on our list.