vue-responsive-text

A Vue component that scales its child node in relation to its parent node's width
2,765 25
Install
npm install vue-responsive-text
Latest Version:0.1.4
Vue:2
License:MIT
Last Updated:Dec 9, 2022
Links: GitHub  ·  npm
Maintainer: shwilliam

vue-responsive-text

scaling text example

Vue component that scales its child node in relation to its parent node's width

vue-responsive-text demo

Installation

Install the package from npm by running

$ npm i --save vue-responsive-text

or

$ yarn add vue-responsive-text

Usage

Import the component as you would any other and place responsive text as the component's child.

<template>
  <VueResponsiveText>
    this text will scale
  </VueResponsiveText>
</template>

<script>
import VueResponsiveText from 'vue-responsive-text'

export default {
  ...
  components: {
    VueResponsiveText
  }
};
</script>

Props

Prop Type Required Default Description
transition number false 0 Transition duration in ms

Inspiration

This component was inspired by by @foisonocean's 'react-dynamic-font'.

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

  1. Fork the project
  2. Create your feature branch (git checkout -b new-feature-branch)
  3. Commit your changes (git commit -am 'add new feature')
  4. Push to the branch (git push origin new-feature-branch)
  5. Submit a pull request!

Related Packages

vue-resize-text

Vue Resize Text makes font auto resizing on responsive layout

30,606 69
vue3-resize-text

Vue 3 Resize Text makes font auto resizing on responsive layout

54,488 12
vue-responsive

A plugin for responsive design without media querys for Vue.js 2.x

25,134 97
text-truncate-scroll

A light-weight js utility that truncates overflowing text with ellipsis, and sho...

11,369 15
@koumoul/v-iframe

Iframes with aspect ratio, iframe resizer integration and some corner cases.

4,186 3

Version History

Version Released Vue License
0.1.4 ^2.5.16 MIT
0.1.3 ^2.5.16 MIT
0.1.2 ^2.5.16 MIT
0.1.1 ^2.5.16 MIT
0.1.0 ^2.5.16