How to use in vue3

[ianping]

How to use in vue3

[brokelyn]

I tried to migrate it to Vue3 but yet no success (no more errors but nothing to see). But here are some tips for the migration if anyone will try further:

• in the render.js file one need to migrate the $scopedSlots like here Vue3 Migration Docs - slots
• also in the render.js file the render function h now needs to be imported like here Vue3 Migration Docs - render function

after that most of the errors are gone but neither of the two examples in the README produced an output for me. Maybe someone can do more research on this.

[rahulkumarsingh73690]

Any update on vue3/nuxt3?

[lovery]

@rahulkumarsingh73690 check out this PR 56
I have an app based on vue3 and it works good.

[SeregPie]

Use v19.

[rahulkumarsingh73690]

Please provide demo how to use in vue 3 and nuxt 3

[Neil-Lin]

Nuxt 3
I create a file useWordCloud.js in composables

import VueWordCloud from 'vuewordcloud'
export default function () {
  return {
    VueWordCloud
  }
}

in .vue

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

<script setup lang="ts">
const { VueWordCloud } = useWordCloud()
</script>

It works for me.