Menu
I have a relatively simple question.
I am trying to implement the widget from this codepen in Nuxt.js.
Here's my code, which works fine if I use RAW HTML:
<!DOCTYPE html>
<html>
<head></head>
<body>
<dev-widget data-username="saurabhdaware"></dev-widget>
<script src="https://unpkg.com/[email protected]/dist/card.component.mjs" type="module"></script>
</body>
</html>
But when I try to include this dev widget in my nuxt.js project, in one of my pages, it does not work.
Here is my code:
<template>
<div class="container">
<div>
<dev-widget data-username="saurabhdaware"></dev-widget>
</div>
</div>
</template>
<script>
export default {
layout: "default",
};
</script>
<script src="https://unpkg.com/[email protected]/dist/card.component.mjs" type="module"></script>
I keep getting an error:
Unknown custom element: < dev-widget >
Any idea what I am doing wrong here?
379
Adding as globally
Navigate to the nuxt.config.js file. It adds the script tag to all pages in your Nuxt app.
export default {
head: {
script: [
{
src: "https://code.jquery.com/jquery-3.5.1.min.js",
},
],
}
// other config goes here
}
If you want to add a script tag before closing the </body> instead of <head> tag, you can do it by adding a body: true.
script: [
{
src: "https://code.jquery.com/jquery-3.5.1.min.js",
body: true,
},
You can also add async, cross-origin attributes to a script tag like this.
script: [
{
src: "https://code.jquery.com/jquery-3.5.1.min.js",
async: true,
crossorigin: "anonymous"
},
],
OUTPUT
<script data-n-head="ssr" src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous" async=""></script>
Adding to particular page
<script>
export default {
head() {
return {
script: [
{
src: 'https://code.jquery.com/jquery-3.5.1.min.js'
}
],
}
}
}
</script>
Note:
If you want to add a local js file, place it in a root static folder and add it as follows.
export default {
head() {
return {
script: [
{
src: '/js/jquery.min.js'
}
],
}
}
}
@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: [
{
type: 'module',
src: 'https://unpkg.com/[email protected]/dist/card.component.mjs'
}
]
},
};
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With