vue-mock-layout

1.1.2 • Public • Published

vue-mock-layout

Easily mock the layout of your Vue apps.

NPM Version NPM Downloads License Tweet

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

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.

Dependencies (1)

Dev Dependencies (27)

Package Sidebar

Install

npm i vue-mock-layout

Weekly Downloads

13

Version

1.1.2

License

MIT

Unpacked Size

1.11 MB

Total Files

21

Last publish

Collaborators

  • johndatserakis