Include external javascript file in a nuxt.js page

10
votes

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?

4
javascriptvue.jsvuejs2nuxt.js

4 Answers

13
votes

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

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

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: {}
}
-1
votes

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