### Animation Examples

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Examples of how to configure enter and leave animations using objects or CSS classes.

```APIDOC
## Animation Examples

### Description
Examples of how to configure enter and leave animations using objects or CSS classes.

### Code Examples

**Basic Object Animation:**
```javascript
let enterAnimation = {opacity: 0};
let leaveAnimation = {opacity: 0};
```

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

**CSS Class Animation:**
```javascript
let enterAnimation = 'animated bounceIn';
let leaveAnimation = 'animated hinge';
```
```

--------------------------------

### Install VueWordCloud with npm

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Use npm to install the vuewordcloud package.

```shell
npm i vuewordcloud
```

--------------------------------

### Basic VueWordCloud Usage

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Basic example of using the VueWordCloud component with sample words and a custom color function.

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

--------------------------------

### Vue Word Cloud Full-Featured Example

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Use this example to implement a dynamic word cloud with custom fonts, colors, rotations, animations, and click handling. It requires Vue 3 and FontFaceObserver.

```html
<template>
  <div>
    <p v-if="progress">
      Loading {{ progress.completedWords }}/{{ progress.totalWords }} words…
    </p>
    <vue-word-cloud
      style="height: 600px; width: 900px;"
      :words="words"
      font-family="Roboto"
      :font-size-ratio="5"
      :color="([, weight]) => weight > 30 ? '#e63946' : weight > 15 ? '#457b9d' : '#2a9d8f'"
      :rotation="([text]) => text.length % 2 === 0 ? 0 : 0.25"
      rotation-unit="turn"
      :spacing="0.25"
      :animation-duration="800"
      :animation-overlap="0.5"
      :enter-animation="{ opacity: 0, transform: 'scale3d(0.3,0.3,0.3)' }"
      :leave-animation="{ opacity: 0 }"
      :load-font="loadFont"
      @update:progress="progress = $event"
    >
      <template #default="{ text, weight, word }">
        <div
          :title="`${text}: ${weight}`"
          style="cursor: pointer; user-select: none;"
          @click="alert(`You clicked: ${text} (weight ${weight})`)"
        >
          {{ text }}
        </div>
      </template>
    </vue-word-cloud>
  </div>
</template>

<script>
import FontFaceObserver from 'fontfaceobserver';

export default {
  data() {
    return {
      progress: null,
      words: [
        ['JavaScript', 42], ['TypeScript', 35], ['Vue',       30],
        ['React',      28], ['CSS',        22], ['HTML',      18],
        ['Node.js',    16], ['Webpack',    12], ['Vite',      10],
        ['GraphQL',     8], ['REST',        6], ['Docker',     5],
      ],
    };
  },
  methods: {
    loadFont(fontFamily, fontStyle, fontWeight, text) {
      return new FontFaceObserver(fontFamily, { style: fontStyle, weight: fontWeight }).load(text);
    },
  },
};
</script>
```

--------------------------------

### Getting Computed Word Layout with `update:cloudWords` Event

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Handle the `update:cloudWords` event to receive the final array of positioned word objects after the layout algorithm completes. Each object contains detailed layout information.

```html
<template>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    @update:cloudWords="onCloudWords"
  />
</template>

<script>
export default {
  data() {
    return {
      words: [['JavaScript', 42], ['Vue', 25], ['CSS', 15]],
    };
  },
  methods: {
    onCloudWords(cloudWords) {
      // cloudWords: [{ key, word, text, weight, rotation, font, color, left, top }, ...]
      console.log('Positioned words:', cloudWords);
    },
  },
};
</script>
```

--------------------------------

### Basic Usage

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Demonstrates the basic usage of the VueWordCloud component with essential properties.

```APIDOC
## Basic Usage

### Description
Demonstrates the basic usage of the VueWordCloud component with essential properties like `style`, `words`, `color`, and `font-family`.

### Code Example
```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"
/>
```
```

--------------------------------

### Component Registration (Browser)

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Include VueWordCloud using script tags for browser environments.

```APIDOC
## Component Registration (Browser)

### Description
Include VueWordCloud using script tags for browser environments. The component will be globally available as `VueWordCloud`.

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

--------------------------------

### Define Simple Enter and Leave Animations

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Define basic opacity animations for words entering and leaving the cloud.

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

--------------------------------

### Include VueWordCloud via Browser Script

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Include VueWordCloud using script tags in an HTML file for browser usage. The component becomes globally available.

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

--------------------------------

### Displaying Layout Progress with `update:progress` Event

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Listen to the `update:progress` event, emitted during cloud layout computation. Use this to display a progress indicator showing completed and total words.

```html
<div>
  <div v-if="progress" style="margin-bottom: 8px;">
    Computing: {{ progress.completedWords }} / {{ progress.totalWords }} words
    ({{ Math.round((progress.completedWords / progress.totalWords) * 100) }}%)
  </div>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    @update:progress="onProgress"
  />
</div>

<script>
export default {
  data() {
    return {
      progress: null,
      words: [['JavaScript', 42], ['TypeScript', 30], ['Vue', 25], ['React', 20], ['CSS', 15]],
    };
  },
  methods: {
    onProgress(value) {
      this.progress = value;
    },
  },
};
</script>
```

--------------------------------

### Component Registration (ES Module)

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Register the VueWordCloud component globally or locally within another component.

```APIDOC
## Component Registration (ES Module)

### Description
Register the VueWordCloud component globally or locally within another component.

### Code Examples

**Global Registration:**
```javascript
import Vue from 'vue';
import VueWordCloud from 'vuewordcloud';

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

**Local Registration:**
```javascript
import VueWordCloud from 'vuewordcloud';

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

--------------------------------

### Vue Word Cloud with String Array Words

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Render a word cloud using a simple array of strings. Each word will be assigned a default weight of 1.

```html
<vue-word-cloud
    style="height: 300px; width: 500px;"
    :words="['vue', 'javascript', 'typescript', 'react', 'angular']"
  />
```

--------------------------------

### Set Word Transition Styles with `enter-animation` and `leave-animation`

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Define how words animate in and out using CSS property objects or CSS class names. Supports JS-driven or CSS-class-driven animations.

```html
<!-- JS-driven fade + scale -->
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :enter-animation="{ opacity: 0, transform: 'scale3d(0.3,0.3,0.3)' }"
    :leave-animation="{ opacity: 0 }"
    :animation-duration="600"
  />

  <!-- CSS class animation using Animate.css -->
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    enter-animation="animate__animated animate__bounceIn"
    leave-animation="animate__animated animate__hinge"
    :animation-duration="1000"
  />
```

--------------------------------

### Adapt Environment with `create-canvas` and `create-worker`

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Override canvas and Web Worker instantiation for environments like SSR or testing. Provides custom factories for these elements.

```javascript
// Custom canvas factory (e.g., using node-canvas in SSR)
const createCanvas = () => document.createElement('canvas');

// Custom worker factory for environments that can't use Blob URLs
const createWorker = (code) =>
  new Worker(URL.createObjectURL(new Blob([code], { type: 'text/javascript' })));
```

```html
<template>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :create-canvas="createCanvas"
    :create-worker="createWorker"
  />
</template>
```

--------------------------------

### Control Animation Timing with `animation-duration`, `animation-easing`, `animation-overlap`

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Configure the timing and staggering of word animations during layout changes. `animation-overlap` controls the per-word delay.

```html
<template>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :animation-duration="800"
    animation-easing="ease-in-out"
    :animation-overlap="0.5"
    :enter-animation="{ opacity: 0, transform: 'scale3d(0.3,0.3,0.3)' }"
    :leave-animation="{ opacity: 0, transform: 'scale3d(0.3,0.3,0.3)' }"
  />
</template>
```

--------------------------------

### VueWordCloud with Custom Word Renderer

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Customize how each word is rendered within the VueWordCloud component using a slot-scope.

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

--------------------------------

### Vue Word Cloud with [text, weight] Tuple Array

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Provide word data as an array of [text, weight] tuples. This allows explicit control over each word's importance.

```html
<vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="[
      ['JavaScript', 42],
      ['TypeScript', 30],
      ['Vue',        25],
      ['React',      20],
      ['CSS',        15],
      ['HTML',        8],
    ]"
  />
```

--------------------------------

### Custom Canvas Creation

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Provide a custom function to create a Canvas instance.

```APIDOC
## Custom Canvas Creation

### Description
Provide a custom function to create a Canvas instance.

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

--------------------------------

### VueWordCloud Properties

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Detailed list of properties available for configuring the VueWordCloud component.

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

--------------------------------

### Register VueWordCloud Locally (ES Module)

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Register the VueWordCloud component in the scope of another component using ES modules.

```javascript
import VueWordCloud from 'vuewordcloud';

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

--------------------------------

### Vue Word Cloud with Static Color

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Apply a single CSS color to all words in the word cloud by passing a string to the `color` prop.

```html
<vue-word-cloud
    style="height: 300px; width: 500px;"
    :words="words"
    color="DarkSlateBlue"
  />
```

--------------------------------

### Custom Word Renderer

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Utilize the slot-scope to provide a custom rendering for each word in the cloud.

```APIDOC
## Custom Word Renderer

### Description
Pass custom renderer for the words using the `slot-scope` to access word properties like `text`, `weight`, and `word`.

### Code Example
```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>
```
```

--------------------------------

### Vue Word Cloud with Color Palette by Index

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Assign colors to words from a predefined palette based on their index using a callback function for the `color` prop.

```html
<vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :color="(word, index) => palette[index % palette.length]"
  />
```

--------------------------------

### Vue Word Cloud with Dynamic Color Function

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Dynamically set word colors based on their weight using a callback function for the `color` prop. The function receives word data and should return a CSS color string.

```html
<vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :color="([, weight]) => {
      if (weight > 30) return 'DeepPink';
      if (weight > 15) return 'RoyalBlue';
      return 'Indigo';
    }"
  />
```

--------------------------------

### Custom Worker Creation

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Provide a custom function to create a Web Worker instance.

```APIDOC
## Custom Worker Creation

### Description
Provide a custom function to create a Web Worker instance.

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

--------------------------------

### Custom Font Loading Function

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Implement a custom function to load fonts, ensuring they are available before rendering words.

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

--------------------------------

### Set Inter-word Padding with `spacing`

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Adjust the padding between words using the `spacing` prop. A value of 0 means words may touch.

```html
<template>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :spacing="0.5"
  />
</template>
```

--------------------------------

### Load Custom Fonts with `load-font`

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Provide a custom font loading function to ensure fonts are available before rendering. Uses FontFaceObserver for browser compatibility.

```html
<template>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    font-family="Pacifico"
    :load-font="loadFont"
  />
</template>

<script>
import FontFaceObserver from 'fontfaceobserver';

export default {
  data() {
    return {
      words: [['JavaScript', 42], ['Vue', 30], ['CSS', 15]],
    };
  },
  methods: {
    // Uses FontFaceObserver for broader browser compatibility
    loadFont(fontFamily, fontStyle, fontWeight, text) {
      return new FontFaceObserver(fontFamily, { style: fontStyle, weight: fontWeight }).load(text);
    },
  },
};
</script>
```

--------------------------------

### Vue Word Cloud with Full Object Form and Style Overrides

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Use an array of objects for word data, allowing per-word customization of style properties like color, fontFamily, and rotation.

```html
<vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="[
      { text: 'JavaScript', weight: 42, color: 'goldenrod',  fontFamily: 'Roboto', rotation: 0,    rotationUnit: 'turn' },
      { text: 'TypeScript', weight: 30, color: 'steelblue',  fontFamily: 'Roboto', rotation: 0.25, rotationUnit: 'turn' },
      { text: 'Vue',        weight: 25, color: 'mediumseagreen' },
      { text: 'React',      weight: 20, color: 'deepskyblue' },
    ]"
  />
```

--------------------------------

### Vue Word Cloud with Custom Typography Props

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Customize font properties like family, size ratio, weight, and style using static values or per-word callback functions for the respective props.

```html
<vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    font-family="Roboto"
    :font-size-ratio="5"
    :font-weight="([, weight]) => weight > 20 ? 'bold' : 'normal'"
    :font-style="([text]) => text === 'Vue' ? 'italic' : 'normal'"
  />
```

--------------------------------

### Custom Font Loading

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Implement custom font loading logic, including support for older browsers using FontFaceObserver.

```APIDOC
## Custom Font Loading

### Description
Implement custom font loading logic. The default `loadFont` function uses `document.fonts.load`. A custom function can be provided to support older browsers using `FontFaceObserver`.

### Code Examples

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

**Using FontFaceObserver:**
```javascript
import FontFaceObserver from 'fontfaceobserver';

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

--------------------------------

### Custom Canvas Creation Function

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Provide a custom function to create the canvas element used by the word cloud.

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

--------------------------------

### Custom Word Rendering with Default Slot

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Use the default scoped slot to replace plain text rendering with custom elements. The slot provides word data like text, weight, and color. Attach event listeners for interactivity.

```html
<template>
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :color="([, weight]) => weight > 20 ? 'DeepPink' : 'RoyalBlue'"
  >
    <template #default="{ text, weight, word }">
      <div
        :title="`Weight: ${weight}`"
        style="cursor: pointer;"
        @click="onWordClick(word)"
        @mouseenter="hoveredWord = text"
        @mouseleave="hoveredWord = null"
      >
        {{ text }}
      </div>
    </template>
  </vue-word-cloud>
</template>

<script>
export default {
  data() {
    return {
      hoveredWord: null,
      words: [['JavaScript', 42], ['TypeScript', 30], ['Vue', 25], ['React', 20]],
    };
  },
  methods: {
    onWordClick(word) {
      console.log('Clicked:', word);
    },
  },
};
</script>
```

--------------------------------

### Custom Font Loading with FontFaceObserver

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Provide a custom `loadFont` function using `FontFaceObserver` to support older browsers or specific font loading strategies.

```javascript
import FontFaceObserver from 'fontfaceobserver';

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

--------------------------------

### VueWordCloud Events

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

List of events emitted by the VueWordCloud component.

```APIDOC
## Events

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

--------------------------------

### Custom Worker Creation Function

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Define a custom function to create a Web Worker, allowing for specific worker initialization or configuration.

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

--------------------------------

### Register VueWordCloud Globally (ES Module)

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Register the VueWordCloud component globally in your Vue application using ES modules.

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

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

--------------------------------

### Set Word Rotation with `rotation` and `rotation-unit`

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Control word rotation using static values or functions. `rotation-unit` can be 'turn', 'deg', or 'rad'.

```html
<template>
  <!-- All words horizontal -->
  <vue-word-cloud style="height:300px;width:500px;" :words="words" :rotation="0" />

  <!-- All words at 45° -->
  <vue-word-cloud style="height:300px;width:500px;" :words="words" :rotation="45" rotation-unit="deg" />

  <!-- Random horizontal or vertical per word (using 'turn' unit) -->
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :rotation="() => Math.random() > 0.5 ? 0 : 0.25"
    rotation-unit="turn"
  />

  <!-- Pick from a set of angles deterministically per word -->
  <vue-word-cloud
    style="height: 480px; width: 640px;"
    :words="words"
    :rotation="([text]) => {
      const angles = [0, 0.25, 0.75]; // 0°, 90°, 270° in turns
      return angles[text.charCodeAt(0) % angles.length];
    }"
    rotation-unit="turn"
  />
</template>
```

--------------------------------

### Use CSS Classes for Animations

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Apply CSS classes for enter and leave animations, useful for integrating with animation libraries like Animate.css.

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

--------------------------------

### Define Complex Enter Animation

Source: https://github.com/seregpie/vuewordcloud/blob/master/README.md

Define a more complex enter animation using scale and opacity for words.

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

--------------------------------

### Global Registration of Vue Word Cloud

Source: https://context7.com/seregpie/vuewordcloud/llms.txt

Register the Vue Word Cloud component globally in your main Vue application file (e.g., main.js). This makes the component available throughout your application under the tag <vue-word-cloud>.

```javascript
import { createApp } from 'vue';
import VueWordCloud from 'vuewordcloud';
import App from './App.vue';

const app = createApp(App);
app.component(VueWordCloud.name, VueWordCloud); // registers as <vue-word-cloud>
app.mount('#app');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.