Vue3 Resize Text

A vue3 directive which automatically resize font size based on element width.

It makes the font-size flexible on fluid or responsive layout.


Live Demo: Resize the browser viewport to see the effect in action

For vue.js 2.x see the vue-resize-text

!vue-resize-text

Installation

Install via NPM

$ npm install vue3-resize-text --save

Install via CDN

``html


`

#### Global

Register VueResizeText globally:

$3


`javascript
import { createApp } from "vue"
import App from "./App.vue"
import VueResizeText from "vue3-resize-text"

const app = createApp(App)
app.use(VueResizeText)
`
or using directive

`javascript
import { createApp } from "vue"
import App from "./App.vue"
import VueResizeText from "vue3-resize-text"

const app = createApp(App)
app.directive('ResizeText', VueResizeText.ResizeText);
`


Directive `v-resize-text` then can be used in any of Component

`html

`

#### Local

Include the VueResizeText directive directly into your component using import:

`html


`

$3

#### Basic usage

`html



`

$3


v-resize-text="{ratio:1.5, minFontSize: '30px', maxFontSize: '100px', delay: 200}"

| Argument | Description | Type | Default |
| ----------- | --------------- | ------------ | ------------ |
| ratio | Font Ratio is the tweek to make the text resize properly, greater then 1 makes the font smaller and less then 1` make the font bigger | Number | 1 |
| minFontSize | Minimum font-size threshold in px| Number/String | 16px or 16 | - |
| maxFontSize | Maximum font-size threshold in px| Number/String | 500px or 500 | - |
| delay | Debound time delay on window resize | Number | 200 | - |

License

MIT