# vue2-superplaceholder

> SuperPlaceholder based on [superplaceholder.js](https://github.com/chinchang/superplaceholder.js) for Vue 2.x.

Latest version **2.0.2** (published 2020-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-superplaceholder
pnpm add vue2-superplaceholder
yarn add vue2-superplaceholder
bun add vue2-superplaceholder
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2020-02-09 |
| First published | 2017-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Gomah |
| Maintainers | gomah |
| Keywords | vue, javascript, superplaceholder, html, input |

## Links

- npm: https://www.npmjs.com/package/vue2-superplaceholder
- Repository: https://github.com/Gomah/vue2-superplaceholder
- Homepage: https://github.com/Gomah/vue2-superplaceholder#readme
- Issues: https://github.com/Gomah/vue2-superplaceholder/issues
- npm.io page: https://npm.io/package/vue2-superplaceholder

## Dependencies (1)

- [superplaceholder](https://npm.io/package/superplaceholder.md) ^1.0.0

## Recent versions

- 2.0.2 (latest) — 2020-02-09
- 2.0.1 — 2020-01-10
- 2.0.0 — 2019-10-09
- 1.0.2 — 2017-05-04
- 1.0.1 — 2017-05-04

## README

# vue2-superplaceholder

SuperPlaceholder component based on [superplaceholder.js](https://github.com/chinchang/superplaceholder.js) for Vue 2.x.

> superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

[![circle-ci][circle-src]][circle-href]
[![npm version][npm-version-src]][npm-version-href]
[![Dependencies][david-dm-src]][david-dm-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![code style: prettier](https://img.shields.io/badge/code_style-airbnb/prettier-FF5A5F.svg?style=flat-square)](https://github.com/airbnb/javascript)
[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg?style=flat-square)](https://opensource.org/licenses/MIT)

---

## Installation

```bash
# yarn
$ yarn add vue2-superplaceholder

# npm
$ npm install vue2-superplaceholder --save
```

## Example

```vue
<template>
  <super-placeholder
    :sentences="['Something to show', 'Another thing to show']"
    v-model="form.email"
    :options="{ cursor: '_' }"
  >
  </super-placeholder>
</template>

<script>
import SuperPlaceholder from 'vue2-superplaceholder';

export default {
  data() {
    return {
      form: {
        email: null,
      },
    };
  },
  components: {
    SuperPlaceholder,
  },
};
</script>
```

---

### Customization

Optional `options` object for custom settings.

```js
options: {
		// delay between letters (in milliseconds)
		letterDelay: 100, // milliseconds
		// delay between sentences (in milliseconds)
		sentenceDelay: 1000,
		// should start on input focus. Set false to autostart
		startOnFocus: true, // [DEPRECATED]
		// loop through passed sentences
		loop: false,
		// Initially shuffle the passed sentences
		shuffle: false,
		// Show cursor or not. Shows by default
		showCursor: true,
		// String to show as cursor
		cursor: '|',
		// Control onFocus behaviour. Default is `superplaceholder.Actions.START`
		onFocusAction: superplaceholder.Actions.[NOTHING|START|STOP]
		// Control onBlur behaviour. Default is `superplaceholder.Actions.STOP`
 		onBlurAction: superplaceholder.Actions.[NOTHING|START|STOP]
	}
```

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/dt/vue2-superplaceholder.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/vue2-superplaceholder
[circle-src]: https://circleci.com/gh/Gomah/vue2-superplaceholder.svg?style=shield
[circle-href]: https://circleci.com/gh/Gomah/vue2-superplaceholder
[npm-downloads-src]: https://img.shields.io/npm/v/vue2-superplaceholder/latest.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/vue2-superplaceholder
[david-dm-src]: https://david-dm.org/gomah/vue2-superplaceholder/status.svg?style=flat-square
[david-dm-href]: https://david-dm.org/gomah/vue2-superplaceholder

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