Vue Balance Text

A Vue directive that implements the "balance-text" package to create line breaks to make each line of text in an element equal.
Alternatives To Vue Balance Text
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Nuxt48,7955,3172,90412 hours ago318November 20, 2023978mitTypeScript
The Intuitive Vue Framework.
Bootstrap Vue14,4174,6051,081a month ago170October 26, 2022189mitJavaScript
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Vue Awesome Swiper12,5592,243587a year ago58March 19, 2022309mitJavaScript
🏆 Swiper component for @vuejs
Framework11,062628 months ago1,600October 11, 20232mit
Old repo of Nuxt 3 framework, now on nuxt/nuxt
Vue Storefront10,348
14 hours ago43mitTypeScript
The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: Always Open Source, MIT license.
a month ago32July 20, 2023278mitPython
Open source annotation tool for machine learning practitioners.
Vuex Persistedstate5,6291,0394552 years ago38September 21, 202127mitJavaScript
💾 Persist and rehydrate your Vuex state between page reloads.
Primevue5,384821212 hours ago162November 28, 2023284mitCSS
Next Generation Vue UI Component Library
6 days ago1
A curated list of awesome things related to Nuxt.js
I Hate Regex4,163
7 months ago35Vue
The code for 😈 - The Regex Cheat Sheet
Alternatives To Vue Balance Text
Select To Compare

Alternative Project Comparisons


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


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


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


In nuxt.config.js:

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


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>




Popular Vue Projects
Popular Nuxt Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Template
Vue Directive