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 |

Preview