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">
  <!-- your code  -->
 </VueLayoutPage>
</template>

<!-- import locally -->

<template>
  <VueLayoutPage bodyBgColor="#f2f2f2">
  <!-- your code  -->
 </VueLayoutPage>
</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">
  <!-- your code  -->
 </VueLayoutPage>
</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