Three line layout for Vue page
- Support both Vue 2 & Vue 3
- Support both PC & Mobile
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>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>| Name | Description | Type |
|---|---|---|
| bodyBgColor | body backgound color | string |
| hideHeaderPlaceholder | hide header placeholder | boolean |
| hideFooterPlaceholder | hide footer placeholder | boolean |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent