Replies: 2 comments 5 replies
-
|
Hi!
|
Beta Was this translation helpful? Give feedback.
-
|
Perfect, just what I wanted. On a related topic, is there an easy way to add cdn links to the head tag without extending the head via |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately, Vue doesn't like Passing For usage inside islands, |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @ElMassimo! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ElMassimo, |
Beta Was this translation helpful? Give feedback.
-
|
Not at the moment, but it's planned: |
Beta Was this translation helpful? Give feedback.
-
|
That's awesome, this could be a easy way to add external resources, as it's a familiar file in vanilla vue setup. This will help new-to-iles users big time. |
Beta Was this translation helpful? Give feedback.
-
Hello islanders!
On a simple html page, using 11ty/is-land package, I was able to trigger the download of the js & css from the cdn as part of the progressive hydration of the island with the
on:visibledirective of this package (same as ourclient:visible). Here is the html page - https://github.com/TechAkayy/prozone-chairs-html (demo - https://prozone-chairs-html.netlify.app/)Is this achievable with Iles?
Please refer to this sample repo, that's pretty much the same html page but components needing hydration are pulled out as separate components - https://github.com/TechAkayy/prozone-chairs-iles (current demo - https://prozone-chairs-iles.netlify.app/)
I'm progressively hydrating my
BookAnAppointmentcomponent withclient:visiblein my index page. This component uses pikaday datepicker.Pikaday js & css can be used via npm import, though I want to use it from the cdn, as a way of learning how to apply this technique to libraries that are only available via cdn. I'm currently adding the cdn links via
app.tsby extending the head tag. This works just fine, the component hydrates when entering the viewport.But, my question is if there is a way to only download the pikaday js & css from the cdn only when the component is hydrating via client:visible directive. Let me know if it's possible to achieve this.
Some attempts from my end:
<Head>component wasn't working as Vite ignores the script tags added as side-effects.I tried adding them to the head tag using Client Scripts SFC custom section, but this doesn't work nicely with the
client:visibleon the component, and I'm getting theappConfig.js?v=78c168bf:9 Uncaught (in promise) Error: App config not properly injected in apperror.client:visibleon it, I then get the Pikaday is not defined error. Probably more of a usage issue - as to how to couple using cdn imports via client script in the component.Beta Was this translation helpful? Give feedback.
All reactions