# vue3-resize-text-x

> Vue 3 Resize Text makes font auto resizing on responsive layout make it faster

Latest version **0.1.3** (published 2023-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-resize-text-x
pnpm add vue3-resize-text-x
yarn add vue3-resize-text-x
bun add vue3-resize-text-x
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-11-14 |
| First published | 2023-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 25.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | JayeshLab |
| Maintainers | chocobo7 |
| Keywords | text, resize, font, responsive, fit, rescale, vue, vue.js, vue3, directives |

## Links

- npm: https://www.npmjs.com/package/vue3-resize-text-x
- Repository: https://github.com/JayeshLab/vue3-resize-text
- Homepage: https://github.com/JayeshLab/vue3-resize-text/#readme
- Issues: https://github.com/JayeshLab/vue3-resize-text/issues
- npm.io page: https://npm.io/package/vue3-resize-text-x

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2023-11-14
- 0.1.2 — 2023-11-14
- 0.1.1 — 2023-11-14
- 0.1.0 — 2023-11-14

## README

# 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.


[![npm](https://img.shields.io/npm/v/vue3-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue3-resize-text)
[![npm](https://img.shields.io/npm/dt/vue3-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue3-resize-text)
[![Build Status](https://www.travis-ci.com/JayeshLab/vue3-resize-text.svg?branch=master&status=passed)](https://travis-ci.org/JayeshLab/vue3-resize-text)
[![npm](https://img.shields.io/npm/l/vue3-resize-text.svg?style=flat-square)](http://opensource.org/licenses/MIT)

[Live Demo](https://jayeshlab.github.io/vue3-resize-text/index.html): Resize the browser viewport to see the effect in action

For vue.js 2.x see the [vue-resize-text](https://github.com/JayeshLab/vue-resize-text "vue-resize-text")



![vue-resize-text](https://user-images.githubusercontent.com/36194663/48419503-21935780-e77e-11e8-8a2f-6a1c9e33f740.gif)

## Installation

Install via NPM

`$ npm install vue3-resize-text --save`

Install via CDN

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue3-resize-text"></script>
```

#### Global

Register VueResizeText globally:

### Use
```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
<template>
  <div v-resize-text>Hello Vue</div>
</template>
```

#### Local

Include the VueResizeText  directive directly into your component using import:

```html
<template>
  <div v-resize-text>Hello Vue</div>
</template>
<script>
import VueResizeText from 'vue3-resize-text'
export default {
 directives: {
    ResizeText: VueResizeText.ResizeText
 }
}
</script>
```

### Usage

#### Basic usage

```html
<template>
  <div>
    <div v-resize-text="{ratio:1.3, minFontSize: '30px', maxFontSize: '100px', delay: 200}">Hello Vue</div>
  </div>
</template>

<script>
  import VueResizeText from 'vue3-resize-text'
  export default {
    directives: {
        ResizeText: VueResizeText.ResizeText
     }
  };
</script>
```

### Directive Arguments
`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

---
_Source: https://npm.io/package/vue3-resize-text-x · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._