vue-mock-layout

Easily mock the layout of your Vue apps.

Links

View demo

View on npm

View on GitHub

Install

# npm
npm i vue-mock-layout

#yarn
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="https://unpkg.com/[email protected]/dist/vue-mock-layout.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vue-mock-layout.css">

About

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)

<vue-mock-layout
    :mobile-breakpoint="992"
    :desktop-height="150"
    :mobile-height="100"
    :background="'#128AB2'"
    :text-color="'#fff'"
    :text="'navbar'"
    :font-size="'2rem'"
></vue-mock-layout>

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

Props

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

Development

# 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

Other

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

License

MIT

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