# vuewordcloud

> Generates a cloud out of the words.

Latest version **19.0.0** (published 2023-01-20) · MIT license · 7.2K weekly downloads

## Install

```sh
npm install vuewordcloud
pnpm add vuewordcloud
yarn add vuewordcloud
bun add vuewordcloud
```

## Health

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

Positive: no vulnerabilities.

Warnings: no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 19.0.0 |
| Published | 2023-01-20 |
| First published | 2017-08-30 |
| Weekly downloads | 7.2K |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 403 |
| Author | Sergej Sintschilin |
| Maintainers | seregpie |
| Keywords | cloud, component, draw, key, tag, vue, word |

## Links

- npm: https://www.npmjs.com/package/vuewordcloud
- Repository: https://github.com/SeregPie/VueWordCloud
- Homepage: https://github.com/SeregPie/VueWordCloud#readme
- Issues: https://github.com/SeregPie/VueWordCloud/issues
- npm.io page: https://npm.io/package/vuewordcloud

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [tanstack-table-hovering](https://npm.io/package/tanstack-table-hovering.md) — 6.3K weekly downloads

## Recent versions

- 19.0.0 (latest) — 2023-01-20
- 18.7.12 — 2020-06-02
- 18.7.11 — 2018-07-11
- 18.7.9 — 2018-07-09
- 18.6.5 — 2018-06-05
- 18.6.1 — 2018-06-01
- 18.5.31 — 2018-05-31
- 18.4.6 — 2018-04-06
- 18.3.21 — 2018-03-21
- 18.3.4 — 2018-03-04
- 18.1.25 — 2018-01-25
- 17.12.23 — 2017-12-23
- 17.12.20 — 2017-12-20
- 17.12.19 — 2017-12-19
- 17.12.15 — 2017-12-15
- … 19 more at https://npm.io/package/vuewordcloud/versions

## README

# VueWordCloud

Generates a cloud out of the words.

## Vue 3

For Vue 3 use the version >18.

## demo

[Try it out!](https://seregpie.github.io/VueWordCloud/)

## setup

### npm

```shell
npm i vuewordcloud
```

### ES module

Register the component globally.

```javascript
import Vue from 'vue';
import VueWordCloud from 'vuewordcloud';

Vue.component(VueWordCloud.name, VueWordCloud);
```

*or*

Register the component in the scope of another component.

```javascript
import VueWordCloud from 'vuewordcloud';

export default {
  components: {
    [VueWordCloud.name]: VueWordCloud,
  },
};
```

### browser

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuewordcloud"></script>
```

The component is globally available as `VueWordCloud`. If Vue is detected, the component will be registered automatically.

## usage

```html
<vue-word-cloud
  style="
    height: 480px;
    width: 640px;
  "
  :words="[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]"
  :color="([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'"
  font-family="Roboto"
/>
```

---

Pass custom renderer for the words.

```html
<vue-word-cloud :words="words">
  <template slot-scope="{text, weight, word}">
    <div :title="weight" style="cursor: pointer;" @click="onWordClick(word)">
      {{ text }}
    </div>
  </template>
</vue-word-cloud>
```

## properties

| property | type | default | description |
| ---: | :--- | :--- | :--- |
| `animation-duration` | `Number` | `1000` | The duration of the animation. |
| `animation-easing` | `String` | `'ease'` | The easing of the animation. |
| `animation-overlap` | `Number` | `1` | The overlap of the animation. Set the value to `1` to animate words all at once. Set the value to `0` to animate words one by one. The value `5` has the same effect as the value `1/5`. |
| `color` | `[String, Function]` | `'Black'` | The default color for each word. |
| `create-canvas` | `Function` | * | Creates a new `Canvas` instance. |
| `create-worker` | `Function` | * | Creates a new `Worker` instance. |
| `enter-animation` | `[Object, String]` | * | The enter animation. |
| `font-family` | `[String, Function]` | `'serif'` | The default font family for each word. |
| `font-size-ratio` | `Number` | `0` | The font size ratio between the words. For example, if the value is `5`, then the largest word will be 5 times larger than the smallest one. The value `5` has the same effect as the value `1/5`. |
| `font-style` | `[String, Function]` | `'normal'` | The default font style for each word. |
| `font-variant` | `[String, Function]` | `'normal'` | The default font variant for each word. |
| `font-weight` | `[String, Function]` | `'normal'` | The default font weight for each word. |
| `leave-animation` | `[Object, String]` | * | The leave animation. |
| `load-font` | `Function` | * | Loads the font. |
| `rotation-unit` | `[String, Function]` | `'turn'` | The default rotation unit for each word. Possible values are `'turn'`, `'deg'` and `'rad'`. |
| `rotation` | `[Number, Function]` | `0` | The default rotation for each word. |
| `spacing` | `Number` | `0` | The spacing between the words. The value is relative to the font size. |
| `text` | `[String, Function]` | `''` | The default text for each word. |
| `weight` | `[Number, Function]` | `1` | The default weight for each word. |
| `words` | `Array` | `[]` | The words to place into the cloud. A value of the array could be either an object, an array or a string.<br/>If the value is an object, it will be resolved to `{text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight, color}`.<br/>If the value is an array, it will be resolved to `[text, weight]`.<br/>If the value is a string, it will be resolved to `text`. |

---

```javascript
let enterAnimation = {opacity: 0};
let leaveAnimation = {opacity: 0};
```

---

Make more complex animations.

```javascript
let enterAnimation = {
  opacity: 0,
  transform: 'scale3d(0.3,0.3,0.3)'
};
```

---

Use classes for CSS animations.

```javascript
let enterAnimation = 'animated bounceIn';
let leaveAnimation = 'animated hinge';
```

---

```javascript
let createCanvas = function() {
  return document.createElement('canvas');
};
```

---

```javascript
let loadFont = function(fontFamily, fontStyle, fontWeight, text) {
  return document.fonts.load([fontStyle, fontWeight, '1px', fontFamily].join(' '), text);
};
```

---

Provide custom `loadFont` function to support older browsers.

```javascript
import FontFaceObserver from 'fontfaceobserver';

let loadFont = function(family, style, weight, text) {
  return (new FontFaceObserver(family, {style, weight})).load(text);
};
```

---

```javascript
let createWorker = function(code) {
  return new Worker(URL.createObjectURL(new Blob([code])));
};
```

## events

| event | description |
| ---: | :--- |
| `update:progress` | The current progress of the cloud words computation. |

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