# vue-balance-text

> A Vue directive that implements balance-text

Latest version **1.3.0** (published 2022-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-balance-text
pnpm add vue-balance-text
yarn add vue-balance-text
bun add vue-balance-text
```

## 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.3.0 |
| Published | 2022-06-25 |
| First published | 2018-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bukwild |
| Maintainers | weotch |
| Keywords | vue, balance-text |

## Links

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

## Dependencies (1)

- [balance-text](https://npm.io/package/balance-text.md) ^3.3.1

## Recent versions

- 1.3.0 (latest) — 2022-06-25
- 1.2.3 — 2019-09-05
- 1.2.2 — 2019-04-25
- 1.2.1 — 2019-04-25
- 1.2.0 — 2019-04-24
- 1.1.2 — 2019-02-21
- 1.1.1 — 2019-02-21
- 1.1.0 — 2019-02-20
- 1.0.3 — 2018-05-08
- 1.0.2 — 2018-05-01
- 1.0.1 — 2018-04-30
- 1.0.0 — 2018-04-30

## README

# vue-balance-text

A Vue directive that implements [balance-text](https://github.com/adobe-webplatform/balance-text).  Here is [their demo page](http://adobe-webplatform.github.io/balance-text/demo/index.html).

## Install

`yarn add vue-balance-text or npm install --save vue-balance-text`

#### Vue

```js
Vue = require('vue')
Vue.directive('balance-text', require('vue-balance-text'))
```

#### Nuxt

In `nuxt.config.js`:

```js
{
  modules: [ 'vue-balance-text/nuxt/module' ]
}
```

## Usage

Use in a Vue template like:

```html
<h1 v-balance-text>A long title with many words that will wrap to multiple lines</h1>
```

When rendering HTML with `v-html`, you need to tell v-balance-text to operate on the children vs on the element it's attached to:

```html
<div v-balance-text.children v-html='body'></div>
```

## Example

Before:

![](http://yo.bkwld.com/243A0w0t2D1h/Image%202018-04-30%20at%204.17.58%20PM.png)

After:

![](http://yo.bkwld.com/3w3v441G1F0q/Image%202018-04-30%20at%204.18.18%20PM.png)

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