VueWordCloud

To use VueWordCloud in your project, install it using npm. For Vue 3 compatibility, ensure you are using version >18.

npm i vuewordcloud

Animations for enter-animation and leave-animation can be defined in three ways:

1. Object-based: Define CSS properties directly.
2. String-based (CSS Classes): Use existing CSS class names (e.g., for Animate.css).
3. Complex Object: Combine properties like opacity and transform.

// Object-based
let enterAnimation = {opacity: 0};
let leaveAnimation = {opacity: 0};

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

// CSS Class-based
let enterAnimation = 'animated bounceIn';
let leaveAnimation = 'animated hinge';

You can register the component either globally in your main Vue instance or locally within a specific component's scope.

// Global registration
import Vue from 'vue';
import VueWordCloud from 'vuewordcloud';

Vue.component(VueWordCloud.name, VueWordCloud);

// Local registration in a component
import VueWordCloud from 'vuewordcloud';

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

For direct browser usage, include Vue and VueWordCloud via unpkg. If Vue is detected on the page, the component will be registered automatically as VueWordCloud.

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

Render a word cloud by passing a words array and configuring styles like color, font-family, and dimensions via CSS.

<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"
/>

Use the default slot with slot-scope to provide a custom renderer for each word. This allows you to wrap words in custom HTML elements and attach event listeners like @click.

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

You can provide custom functions for load-font, create-canvas, and create-worker to extend functionality or support older browsers.

Example: Custom loadFont using FontFaceObserver

import FontFaceObserver from 'fontfaceobserver';

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

Example: Custom createWorker

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

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

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

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

The following events are emitted by the vue-word-cloud component.

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

To use VueWordCloud, import the default export and pass your word data to the words prop. You can provide words as simple strings or as objects for fine-grained control over individual word properties.

<template>
  <VueWordCloud 
    :words="myWords" 
    :animation-duration="2000"
    color="#333"
  />
</template>

<script setup>
import VueWordCloud from 'vuewordcloud';

const myWords = [
  'Hello',
  { text: 'World', weight: 10, color: 'red', rotation: 45, rotationUnit: 'deg' },
  { text: 'Vue', weight: 5, fontFamily: 'serif' }
];
</script>

The VueWordCloud component emits the following events:

• update:cloudWords: Emitted when the cloudWords data is updated.
• update:progress: Emitted with the current progress of the word cloud generation.

The vuewordcloud package exports the VueWordCloud component as the default export. You can import it directly into your Vue application to use the word cloud functionality.

import VueWordCloud from 'vuewordcloud';