Recently I had to load a 3rd party code snippet to my Nuxt app. The code snippet looks something like this:
<link rel="stylesheet" href="https://some-website.com/stuff.css">
<div class="some-class">
<div>Some content...</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://some-other-website.com/stuff.js"></script>
I need to load a stylesheet and several scripts. I will share how I accomplished this using Nuxt and different ways you can do this.
Using vue-meta
You can use vue-meta's head()
method to insert your script. Luckily, vue-meta comes preinstalled with Nuxt.
This will insert both script and style into your the head of the page.
// nuxt.config.js OR pages/some/page.vue
export default {
head() {
return {
script: [
{
src: "https://some-website.com/stuff.js"
}
],
link: [
{
rel: "stylesheet",
href:
"https://some-site.com/stuff.css"
}
]
}
You can do this on either nuxt.config.js
or directly to Nuxt page(s) (If you do this inside nuxt.config.js
, the changes will apply to all pages).
The code above will add the script to head element.
Vue-meta: loading script into body
If you prefer to add the script into body, just add body: true
and you're set! π
script: [
{
src: "https://some-website.com/stuff.js",
body: true
}
]
Vue-meta: defer + async
Vue-meta allows you to add your script with defer and/ or async on. If you want to load it with async and defer, you can add async: true
and defer: true
:
script: [
{
src: "https://some-website.com/stuff.js",
body: true,
async: true,
defer: true
}
]
This is equivalent to have <script type="text/javascript" src="https://some-website.com/stuff.js" async defer></script>
Not sure what async
or defer
does in JS? This article should help.
Non vue-meta alternative
If you want a more 'manual' alternative to vue-meta, you can insert it through the DOM vanilla JS way using Vue's mounted lifecycle:
// pages/some/page.vue
export default {
mounted() {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://some-website.com/stuff.js";
document.body.appendChild(script);
}
}
This trick does:
- Waits for DOM is mounted
- Creates script element
- Appends it to body
Conclusion
There are times when you have to load third-party library without npm install
. Luckily, Nuxt provides an easy way using vue-meta. Alternatively, you can always modify DOM to insert it yourself using Vue's mounted lifecycle method. The latter works with vanilla Javascript.
Thanks for reading. Happy coding!
Top comments (2)
Hello ! Don't hesitate to put colors on your
codeblock
like this example for have to have a better understanding of your code π*hi there, cool staff. *