Include external javascript file in a nuxt.js page

Question

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?

zarpio · Accepted Answer · 2021-04-14 12:32:07Z

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'
          }
        ],
      }
    }
  }

kp123 · Accepted Answer · 2019-11-24 07:53:33Z

11

@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>

answered Nov 24, 2019 at 7:53

kp123

1,3702 gold badges17 silver badges24 bronze badges

2 Comments

beporter Over a year ago

This approach will definitely work, but you will run into issues if the external script loads something in you want to work with in Nuxt. Then there's a race condition between your Nuxt (Vue) code running before the external file has been fetched and processed by your browser.

Simone Over a year ago

@beporter Could you tell more about this? I have a script that loads correctly if I start from / and then browse to the page the uses the script. If I load the page directly, the script is not loaded

muya.dev · Accepted Answer · 2019-11-24 07:39:09Z

You need to add your script in nuxt.config.js. Here is how it should look like

export default {
    mode: 'universal',
    /*
     ** Headers of the page
     */
    head: {
        title: 'Your title',
        meta: [{
                charset: 'utf-8'
            },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            }
        ],

        link: [
            {
                rel: 'stylesheet',
                href: 'css/mystyles.css'
            }
        ],

        script: [
            {
                type: 'module',
                src: 'https://unpkg.com/[email protected]/dist/card.component.js'
            }
        ]
    },
    /*
     ** Customize the progress-bar color
     */
    loading: {
        color: '#fff'
    },
    /*
     ** Global CSS
     */
    css: [],
    /*
     ** Plugins to load before mounting the App
     */
    plugins: [],
    /*
     ** Nuxt.js dev-modules
     */
    buildModules: [],
    /*
     ** Nuxt.js modules
     */
    modules: [],
    /*
     ** Build configuration
     */
    build: {}
}

Wolle · Accepted Answer · 2022-08-12 08:49:25Z

1

With nuxt 3.0.0-rc.6 it is:

meta: { 
  script: [
    { src: "https://path.to/your.js" }
  ]
},

answered Aug 12, 2022 at 8:49

Wolle

4915 silver badges10 bronze badges

Comments

Dattatraya Kale · Accepted Answer · 2019-11-24 06:42:30Z

0

Here is the clue in your answer: "Unknown custom element: < dev-widget >".

Register dev-widget component.

For more details: https://github.com/nuxt/nuxt.js/issues/2877

answered Nov 24, 2019 at 6:42

Dattatraya Kale

1093 bronze badges

1 Comment

kp123 Over a year ago

How do I include the external script file, though?

Collectives™ on Stack Overflow

Include external javascript file in a nuxt.js page

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related