vue-mock-layout
Easily mock the layout of your Vue apps.
Links
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:
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)
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
}}
Browser Example
Development
# install dependenciesnpm install# serve with hot reloadnpm run watch# run the testsnpm run test# build demo pagenpm run build:example# buildnpm run build
Other
Go ahead and fork the project! Submit an issue if needed. Have fun!
License
Packaged with a mixture of vue-lib-template and vue-sfc-rollup.