Easily mock the layout of your Vue apps.
# 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:
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.
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.
<!-- 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.
|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|
|text||String||no||'section'||Text to show in the section|
# install dependenciesnpm install# serve with hot reloadnpm run watch# run the testsnpm run test# build demo pagenpm run build:example# buildnpm run build
Go ahead and fork the project! Submit an issue if needed. Have fun!