vue3 support missing

[MartB]

See egoist/vue-feather-icons#60 for a quick&dirty workaround.

[matschik]

Which error do you exactly encounter ?

[ahoiroman]

I am getting

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'ctx.props.size')

on vuejs3 if I use it like shown in the docs:

<AnnotationIcon size="1.5x" />


...

import { AnnotationIcon } from '@vue-hero-icons/outline'

[MartB]

Yeah, vue3 changed the render() function so this has to be entirely re-written to support vue3.

[matschik]

How would you want to import a vue3 component from this component library ?
I want this library compatible with Vue2 too.

Solutions:

1. I can create a new major version focused on Vue3 on '@vue-hero-icons/outline' and '@vue-hero-icons/solid'. But I don't like this idea because devs could upgrade this dependency by mistake on their Vue2 apps.

2. I can take this opportunity to use vue-heroicons package namespace:
   import { AnnotationIcon } from "@vue-heroicons/outline". But it can be confusing with the previous namespace...

3. I can create a new package named heroicons-vue and you can import components like this:
   import { AnnotationIconSolid, AnnotationIconOutline } from "heroicons-vue"

Also, feel free to submit a PR or give me an example of icon library using Vue3. I want to grab the best practices.

[ahoiroman]

I guess it would be a good idea to use some kind of @next-notation like vue@next.

[matschik]

This is a temporary idea, we need a permanent decision. Choose between the 3 solutions or equivalent.

[ahoiroman]

In this case I'd prefer solution 2.

[Quin452]

I'm glad to see that this has some sort of support.

I am currently trying to get Heroicons to work with Inertia project (basically Vue).
I've even asked for support from Tailwind themselves, and they've yet to provide a solution.

They've suggested downloading the repo as a zip, as well as npm install.
But neither of these work; NPM uses render, but Inertia asks for Default.

Then I found this, and come across the same issue with size as the OP.

[ahmedgadit]

solution 2 would be ok. waiting for update 🥰

[benleivian]

The tailwindlabs/heroicons repo supports vue 3: https://github.com/tailwindlabs/heroicons#vue
I found this project looking for vue 2 support 🎉

[martinsotirov]

As a side note, thanks to the missing Vue 3 support this package is a perfect drop-in replacement for @heroicons/vue for those of us still using Vue 2 or Nuxt. Thanks for not updating to Vue 3 ✌️