/vue-layout-page

Three line layout for Vue 2 and 3 page

Primary LanguageTypeScript

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