DEV Community

Discussion on: I made DEV.to widget for websites/blogs

 
saurabhdaware profile image
Saurabh Daware 🌻

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)

Thread Thread
 
kp profile image
KP

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!

Thread Thread
 
kp profile image
KP

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:

<template>
  <div class="container">

    <div>
        <dev-widget data-username="saurabhdaware"></dev-widget>
    </div>

  </div>
</template>

<script>

export default {
  layout: "default",

  head: {
    script: [
…
Thread Thread
 
saurabhdaware profile image
Saurabh Daware 🌻

Oh I did not know Nuxt required separate handling. Thank you so much 🌻