.mjs lets you use import and export in web without having a webpack build environment.
You have to publish it as a npm package and all npm packages are synced to unpkg
Gotchas:
The api does not return user's data directly, It comes under each article value with user's key
If user has written 0 articles, you dont get any value so no user data in this case.
If you are going to build on top of web components, you'll have to follow the webcomponent best practices (You'll find them on internet) for the widget to work in frameworks
@saurabhdaware
thanks! These tips are going to be really helpful.
I'll definitely let you know if I end up using it! First step, I'm trying to simply include your widget locally to see it in action...and then I can start modifying it :D
I'm trying to include this dev widget in my nuxt.js project, in one of my pages. For context, each page in Nuxt is nothing but a vue component.
You can make it work in framework that way by putting that script file before end of body tag in your index.html.
These frameworks follow a particular standard and having compinents as module is by far the most comfortable way of adding anything. It also makes this process standard since it gets similar to how you would add a usual vue component.
What you write in your vue component is not really staright up appeneded to the final bundle rather they are in some way compiled (in v v v general terms) and they are bundled with vue's code along with it. So it is not really possible to standardize that script include thing (unless you write different widget for different frameworks)
@kiyuku1 's answer would work, but here's the complete solution that would work if we want to include a js (or mjs) file in ONE nuxt.js page only, instead of globally:
.mjs lets you use
importandexportin web without having a webpack build environment.You have to publish it as a npm package and all npm packages are synced to unpkg
Gotchas:
And yes you can go ahead and fork it
Do share the link once you're done :D
@saurabhdaware thanks! These tips are going to be really helpful.
I'll definitely let you know if I end up using it! First step, I'm trying to simply include your widget locally to see it in action...and then I can start modifying it :D
I'm trying to include this dev widget in my nuxt.js project, in one of my pages. For context, each page in Nuxt is nothing but a vue component.
Here is my code:
Any idea what I am doing wrong here? I keep getting an error:
Unknown custom element: < dev-widget >
you'll have to follow the npm install and import 'dev-widget' instead of the link</p>
Thank you...there's gotta be a workaround though! It works fine in a raw HTML file...so it should work in vue as well!
You can make it work in framework that way by putting that script file before end of body tag in your index.html.
These frameworks follow a particular standard and having compinents as module is by far the most comfortable way of adding anything. It also makes this process standard since it gets similar to how you would add a usual vue component.
What you write in your vue component is not really staright up appeneded to the final bundle rather they are in some way compiled (in v v v general terms) and they are bundled with vue's code along with it. So it is not really possible to standardize that script include thing (unless you write different widget for different frameworks)
That makes total sense @saurabhdaware . Thanks for the explanation! 🌻
I'll do some more research to see if I can get this working in vue / nuxt component pages!
Here's how to use your widget in Nuxt, for future reference:
@kiyuku1 's answer would work, but here's the complete solution that would work if we want to include a js (or mjs) file in ONE nuxt.js page only, instead of globally:
…Oh I did not know Nuxt required separate handling. Thank you so much 🌻