vue-layout-page
Three line layout for Vue page
Features
- Support both Vue 2 & Vue 3
- Support both PC & Mobile
Installation
Vue 3
npm install vue-layout-page
// import globally in main.js
import VueLayoutPage from 'vue-layout-page'
import 'vue-layout-page/dist/style.css'
app.use(VueLayoutPage)
// in SFC component
<template>
<VueLayoutPage bodyBgColor="#f2f2f2" />
</template>
<!-- import locally -->
<template>
<VueLayoutPage bodyBgColor="#f2f2f2" />
</template>
<script setup>
import VueLayoutPage from 'vue-layout-page'
import 'vue-layout-page/dist/style.css'
</script>
Vue 2
npm install vue-layout-page
// import globally
import VueLayoutPage from 'vue-layout-page'
import 'vue-layout-page/dist/style.css'
app.use(VueLayoutPage)
<!-- import locally -->
<template>
<VueLayoutPage bodyBgColor="#f2f2f2" />
</template>
<script>
import VueLayoutPage from 'vue-layout-page'
import 'vue-layout-page/dist/style.css'
export default {
components: { VueLayoutPage },
}
</script>
Props
Name | Description | Type |
---|---|---|
bodyBgColor | body backgound color | string |
hideHeaderPlaceholder | hide header placeholder | boolean |
hideFooterPlaceholder | hide footer placeholder | boolean |