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.