How to add an external JavaScript file to a nuxt.js webpage

Question

How to add an external JavaScript file to a nuxt.js webpage

Need some help with a simple query.

I'm looking to incorporate this widget code from CodePen into my Nuxt.js project.

The code works fine when using RAW HTML:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <dev-widget data-username="saurabhdaware"></dev-widget>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3e3f2c772d333e3d3f2e1a6b746a7469">[email protected]</a>/dist/card.component.mjs" type="module"></script>
</body>

</html>

However, when attempting to add this dev widget into my nuxt.js project on one of the pages, it's not functioning properly.

Here is the code snippet:

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a3a2b1eab0aea3a0a2b387f6e9f7e9f4">[email protected]</a>/dist/card.component.mjs" type="module"></script>

An error keeps popping up:

Unknown custom element: < dev-widget >

Any suggestions on what might be causing this issue?

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

Implementing globally

To apply changes globally, follow these steps:

export default {
  head: {
    script: [
      {
        src: "https://code.jquery.com/jquery-3.5.1.min.js",
      },
    ],
  }
  // additional configurations can be added here
}

If you prefer to include a script tag before the closing </body> instead of in the <head>, simply set body: true.

script: [
  {
    src: "https://code.jquery.com/jquery-3.5.1.min.js",
    body: true,
  },

You can also specify attributes like async and crossorigin for a specific script tag.

script: [
  {
    src: "https://code.jquery.com/jquery-3.5.1.min.js",
    async: true,
    crossorigin: "anonymous"
  },
],

EXPECTED OUTPUT

<script data-n-head="ssr" src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous" async=""></script>

Implementing on a specific page

<script>
  export default {
    head() {
      return {
        script: [
          {
            src: 'https://code.jquery.com/jquery-3.5.1.min.js'
          }
        ],
      }
    }
  }
</script>

Note: For using a local JavaScript file, place it in the root static folder and include it accordingly.

  export default {
    head() {
      return {
        script: [
          {
             src: '/js/jquery.min.js'
          }
        ],
      }
    }
  }

Answer 2

Implementing globally

To apply changes globally, follow these steps:

export default {
  head: {
    script: [
      {
        src: "https://code.jquery.com/jquery-3.5.1.min.js",
      },
    ],
  }
  // additional configurations can be added here
}

If you prefer to include a script tag before the closing </body> instead of in the <head>, simply set body: true.

script: [
  {
    src: "https://code.jquery.com/jquery-3.5.1.min.js",
    body: true,
  },

You can also specify attributes like async and crossorigin for a specific script tag.

script: [
  {
    src: "https://code.jquery.com/jquery-3.5.1.min.js",
    async: true,
    crossorigin: "anonymous"
  },
],

EXPECTED OUTPUT

<script data-n-head="ssr" src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous" async=""></script>

Implementing on a specific page

<script>
  export default {
    head() {
      return {
        script: [
          {
            src: 'https://code.jquery.com/jquery-3.5.1.min.js'
          }
        ],
      }
    }
  }
</script>

Note: For using a local JavaScript file, place it in the root static folder and include it accordingly.

  export default {
    head() {
      return {
        script: [
          {
             src: '/js/jquery.min.js'
          }
        ],
      }
    }
  }

Answer 3

Answer №2

If you're looking to include a js or mjs file in just one specific Nuxt.js page, rather than globally, here's a complete solution that will do the trick:

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6828390cb918f82818392a6d7c8d6c8d5">[email protected]</a>/dist/card.component.mjs'
      }
    ]
  },

};
</script>

Answer 4

If you're looking to include a js or mjs file in just one specific Nuxt.js page, rather than globally, here's a complete solution that will do the trick:

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6828390cb918f82818392a6d7c8d6c8d5">[email protected]</a>/dist/card.component.mjs'
      }
    ]
  },

};
</script>

Answer 5

Answer №3

To incorporate your script, it needs to be included in the nuxt.config.js file. Below is an example of how it should be structured:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0460617229736d6063617044352a342a37">[email protected]</a>/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: {}
}

Answer 6

To incorporate your script, it needs to be included in the nuxt.config.js file. Below is an example of how it should be structured:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0460617229736d6063617044352a342a37">[email protected]</a>/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: {}
}

Answer 7

Answer №4

When using nuxt version 3.0.0-rc.6, the code snippet to include an external JavaScript file is:

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

Answer 8

When using nuxt version 3.0.0-rc.6, the code snippet to include an external JavaScript file is:

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

Answer 9

Answer №5

Your response contains the clue: "Unknown custom element: < dev-widget >".

Ensure that the dev-widget component is properly registered.

For additional information, please visit: https://github.com/nuxt/nuxt.js/issues/2877

Answer 10

Your response contains the clue: "Unknown custom element: < dev-widget >".

Ensure that the dev-widget component is properly registered.

For additional information, please visit: https://github.com/nuxt/nuxt.js/issues/2877

How to add an external JavaScript file to a nuxt.js webpage

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with scrolling functionality on dynamically inserted items in jQuery mobile list

How can you attach a d3 graphic to a table that was created automatically?

Utilize a React Switch Toggle feature to mark items as completed or not on your to-do list

How can you inform TypeScript about a file that will be included using a script tag?

Is there a way to grab the inner content of an e-mail link by right-clicking on it?

Line numbers in Vue Codemirror

Update the information within the Nuxt.js middleware

Looking to add some random circle markers to your SVG map?

Strange JSON.parse quirk observed in Node.js when dealing with double backslashes

Click on a button to send the React Router path as a parameter in

What is the best way to discover all available matches?

transferring data using react-router

Fetch a document from a NodeJS Server utilizing Express

PHP AJAX request failing to access current $_COOKIE['x']

Issues with returning a response in AWS Lambda using NodeJs

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

How to create flexible, non-url-changing layout states with angular-ui-router?

Listen for events emitted by a child component in Vue.js 2.0 using the vm.$on method

Node.js client-side code

What is the proper way to declare and utilize a constant list within a component template in NuxtJs?