Vue Component For Balanced Headlines – Wrap Balancer

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>

Preview:

Changelog:

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

Download Details:

Author: wobsoriano

Live Demo: https://vue-wrap-balancer.vercel.app/

Download Link: https://github.com/wobsoriano/vue-wrap-balancer/archive/refs/heads/main.zip

Official Website: https://github.com/wobsoriano/vue-wrap-balancer

Install & Download:

# NPM
$ npm i vue-wrap-balancer