Vue Component For Balanced Headlines – Wrap Balancer

Install & Download:

# NPM
$ npm i vue-wrap-balancer

Description:

Vue port of React Wrap Balancer, which makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like a single word in the last line, making the content more balanced.

How to use it:

1. Import the Balancer component.

import Balancer from 'vue-wrap-balancer'

2. Wrap your content in the <Balancer> component.

<template>
  <h1>
    <Balancer>My Long Title Here</Balancer>
  </h1>
</template>

3. Available props.

/**
 * The HTML tag to use for the wrapper element.
 * @default 'span'
 */
as: {
  type: String,
  required: false,
  default: 'span',
},
/**
 * The balance ratio of the wrapper width (0 <= ratio <= 1).
 * 0 means the wrapper width is the same as the container width (no balance, browser default).
 * 1 means the wrapper width is the minimum (full balance, most compact).
 * @default 1
 */
ratio: {
  type: Number,
  required: false,
  default: 1,
},
/**
 * An option to skip the re-balance logic
 * and use the native CSS text-balancing if supported.
 * @default true
 */
preferNative: {
  type: Boolean,
  required: false,
  default: true,
},
/**
 * The nonce attribute to allowlist inline script injection by the component.
 */
nonce: {
  type: String,
  required: false,
},

Preview:

Changelog:

v1.1.3 (08/26/2023)

• Add default balancer context inject value

v1.2.0 (08/26/2023)

• Unwrap preferNativeBalancing value

v1.1.0 (08/26/2023)

• Add preferNative option

v1.0.0 (06/15/2023)

• Use text-wrap: balance if available
• deps: Bump nanoid to 4.0.2
• Bug Fixes

v0.4.1 (01/29/2023)

• Bugfixes

v0.4.0 (01/26/2023)

• Update

v0.3.1 (01/22/2023)

• Update

v0.3.0 (01/16/2023)

• Remove Vue 2 support.

v0.2.2 (01/10/2023)

• Add name to Balancer and Provider components