Question

3

Include external javascript file in a nuxt.js page

rated 0 times [ 5] [ 2] / answers: 1 / hits: 30950 / 5 Years ago, sun, november 24, 2019, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

loganl

Add To Favorites

Follow

Total Points: 424

Total Questions: 86

Total Answers: 112

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

loganl questions

1 Is there an easier way to display live time and date in HTML using bootstrap?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 Angular View Component Data Loss during Reload Refresh using BehaviorSubject

Tue, Mar 24, 20, 00:00, 4 Years ago

1 What is the best way to use async/await inside onAuthStateChanged() of Firebase?

Thu, Jun 13, 19, 00:00, 5 Years ago

1 'Symbol' is undefined in IE 11

Sun, Apr 14, 19, 00:00, 5 Years ago

1 CSS: Add border with animation left to right | right to left

Thu, Feb 21, 19, 00:00, 5 Years ago

View All

answered 5 Years ago brookelynshaem · Accepted Answer

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

}