# vue-layout-page

> Three line layout for Vue page

Latest version **1.0.2** (published 2022-05-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-layout-page
pnpm add vue-layout-page
yarn add vue-layout-page
bun add vue-layout-page
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-05-06 |
| First published | 2022-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | chenguzhen87 |
| Maintainers | chenguzhen87 |
| Keywords | vue3, vue-layout, layout |

## Links

- npm: https://www.npmjs.com/package/vue-layout-page
- Repository: https://github.com/chenguzhen87/vue-layout-page
- Homepage: https://github.com/chenguzhen87/vue-layout-page#readme
- Issues: https://github.com/chenguzhen87/vue-layout-page/issues
- npm.io page: https://npm.io/package/vue-layout-page

## Dependencies (2)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.12.5
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^8.3.1

## Recent versions

- 1.0.2 (latest) — 2022-05-06
- 1.0.1 — 2022-05-06
- 1.0.0 — 2022-05-06

## README

# vue-layout-page
Three line layout for Vue page
<br>

## Features
- Support both Vue 2 & Vue 3
- Support both PC & Mobile
<br>

## Installation

### Vue 3

```bash
npm install vue-layout-page
```

```ts
// 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>

```

```vue
<!-- import locally -->

<template>
   <VueLayoutPage bodyBgColor="#f2f2f2" />
</template>

<script setup>
import VueLayoutPage from 'vue-layout-page'
import 'vue-layout-page/dist/style.css'
</script>
```

<br>

### Vue 2

```bash
npm install  vue-layout-page
```

```ts
// import globally
import VueLayoutPage from 'vue-layout-page'
import 'vue-layout-page/dist/style.css'
app.use(VueLayoutPage)

```

```vue
<!-- 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>
```

<br>

## Props

| Name                    | Description                                                                     |  Type   |
|-------------------------|---------------------------------------------------------------------------------|---------|
| bodyBgColor             | body backgound color                                                            | string  |
| hideHeaderPlaceholder   | hide header placeholder                                                         | boolean  |
| hideFooterPlaceholder   | hide footer placeholder                                                         | boolean  |

<br>

## Preview
<img src="./example/preview.jpg" />

---
_Source: https://npm.io/package/vue-layout-page · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._