vue-balance-text

A Vue directive that implements balance-text. Here is their demo page.

Install

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

Vue

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

Nuxt

In nuxt.config.js:

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

Usage

Use in a Vue template like:

<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:

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

Example

Before:

After: