vue-mock-layout v1.1.2

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/vue-mock-layout@1.1.1/dist/vue-mock-layout.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-mock-layout@1.1.1/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

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.