Vue mock layout

Easily mock the layout of your Vue apps.

Version: 1.1.2 Updated: 03/19/2019

By: promosis License: MIT

Downloads Last 30 Days: 61


Easily mock the layout of your Vue apps.

NPM Version NPM Downloads License Tweet

View demo

View on npm

View on GitHub


# npm
npm i vue-mock-layout

yarn add vue-mock-layout

Or you can include it through the browser at the bottom of your page along with the css:

<script src=""></script>

<link rel="stylesheet" type="text/css" href="">


When laying out the skeleton of a new site we found a need for an easy way to visualize different sections before they were worked on.

With vue-mock-layout you can quickly mock sections by customizing a few different options - for instance you can change the height of a mocked section. Changing the hight helps make the mockups more realistic because some sections are naturally a lot larger than others and that should be taken into account during the early stages. Other options include color, font-size, and text (plus more) - see the usage example below or see the code in the ./example folder to get started.

Usage Example

<!-- css import for when you want to import the component css into your css file/files  -->
@import '/path/to/node_modules/vue-mock-layout.css';

<!-- css import for when you're importing the css directly in your js  -->
import 'vue-mock-layout/dist/vue-mock-layout.css'

import VueMockLayout from 'vue-mock-layout'
Vue.component('vue-mock-layout', VueMockLayout)

Note - all props are optional. If you don't set any props then it will output a simple template section.


prop type required default description
mobileBreakpoint Number no 992 Width at which the mobile options are used
desktopHeight Number no 200 Height of the sections for desktops
mobileHeight Number no 100 Height of the sections for mobile
background String no '#128AB2' Background color
textColor String no '#fff' Text color
text String no 'section' Text to show in the section
fontSize String no '2rem' Text size

SASS Structure

.vue-mock-layout {
    &__text {

Browser Example

See on CodePen


# install dependencies
npm install

# serve with hot reload
npm run watch

# run the tests
npm run test

# build demo page
npm run build:example

# build
npm run build


Go ahead and fork the project! Submit an issue if needed. Have fun!



Packaged with a mixture of vue-lib-template and vue-sfc-rollup.

Categories: Vue js