VueWordCloud

Generates a cloud out of the words.

Vue 3

For Vue 3 use the version >18.

demo

Try it out!

setup

npm

npm i vuewordcloud

ES module

Register the component globally.

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

Vue.component(VueWordCloud.name, VueWordCloud);

or

Register the component in the scope of another component.

import VueWordCloud from 'vuewordcloud';

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

browser

<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

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

<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.If the value is an object, it will be resolved to {text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight, color}.If the value is an array, it will be resolved to [text, weight].If the value is a string, it will be resolved to text. |

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

Make more complex animations.

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

Use classes for CSS animations.

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

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

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.

import FontFaceObserver from 'fontfaceobserver';

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

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