Unable to apply client directive when using Vuetify

[TechAkayy]

• I have read the troubleshooting section before opening an issue.
• I have tried upgrading iles and vite.

Description 📖

I'm using Vuetify, and the SampleCard component in the index page loads fine in development before adding client directives. But when I add client:load to SampleCard, vuetify breaks with this error message.

I notice a slight flash of the component loading fine, before it disappears and displays the below error.

Reproduction 🐞

https://github.com/pinegrow/pg-iles-vuetify

Dependencies Info

Run npx iles info and pnpm list (or npm list) and provide the output:

iles v0.9.5 vite v4.3.9

Screenshots 📷

[ElMassimo]

Hi!

Based on the error message, it seems like Vuetify is relying on global injects, requiring its plugin to be added in the Vue app in order for Vuetify components to work.

Since client:load will run the component in a separate Vue app, you might need to use the plugin provided by Vuetify inside the island, see related discussion.

[TechAkayy]

Awesome, thanks @ElMassimo. That makes sense. import { getCurrentInstance } from 'vue' is a new learning for me :-)

[TechAkayy]

Works nicely now 👍 https://pg-iles-vuetify.netlify.app/ Thanks.