# vue-simple-portal

> Simple portal component for Vue.js

Latest version **1.0.3** (published 2017-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-simple-portal
pnpm add vue-simple-portal
yarn add vue-simple-portal
bun add vue-simple-portal
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-12-11 |
| First published | 2017-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | EGOIST |
| Maintainers | rem |

## Links

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

## Recent versions

- 1.0.3 (latest) — 2017-12-11
- 1.0.2 — 2017-12-11
- 1.0.1 — 2017-12-11
- 1.0.0 — 2017-12-11

## README

# vue-simple-portal

[![NPM version](https://img.shields.io/npm/v/vue-simple-portal.svg?style=flat)](https://npmjs.com/package/vue-simple-portal) [![NPM downloads](https://img.shields.io/npm/dm/vue-simple-portal.svg?style=flat)](https://npmjs.com/package/vue-simple-portal) [![CircleCI](https://circleci.com/gh/EGOIST/vue-simple-portal/tree/master.svg?style=shield)](https://circleci.com/gh/EGOIST/vue-simple-portal/tree/master)

Simple portal component which allows to mount component anywhere.

Just like [portal-vue](https://github.com/LinusBorg/portal-vue/) but does less.

## Install

```bash
yarn add vue-simple-portal
```

CDN: [UNPKG](https://unpkg.com/vue-simple-portal/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-simple-portal/) (available as `window.SimplePortal`)

## Usage

Given an html file:

```html
<!-- where your app is mounted -->
<div id="app"></div>
<!-- where the portal targets are mounted -->
<div id="target"></div>
```

And your component:

```vue
<template>
  <simple-portal target="target">
    <h1>haha</h1>
    <h2>it just works<h1>
    <p>we'll appear in #target element!</p>
  </simple-portal>
</template>

<script>
import SimplePortal from 'vue-simple-portal'

export default {
  components: {
    SimplePortal
  }
}
</script>
```

## Props

### target

Type: `string`<br>
Required: `true`

The id of target HTML element.

### componentName

Type: `string`<br>
Default: `portal-target`

The component name for the portal target component.

It's recommended to set a custom name if you used this component for multiple times.

## License

MIT &copy; [EGOIST](https://github.com/EGOIST)

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