1

I'm trying to embed a script from an external JS, according to the documentation and this post (Include external javascript file in a nuxt.js page) I have something like the following...

<template>
  <div>
    <blocksurvey-widget>
      some details
    </blocksurvey-widget>
  </div>
</template>


export default {
  head: {
    script: [
      {
        type: "module",
        src: "https://blocksurvey.io/assets/js/blocksurvey-widget.js",
      },
    ],
  },
}

I am wondering why this is not working and throws the [Vue-warn] error:

Unknown custom element: <blocksurvey-widget> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I believe the script is appended to the head, and I think I need to register the component, but I had the impression this would be working normally once the script has been added. Do I have find some way to add the <blocksurvey-widget> component?

Improve this question
5
  • Can you add a little more information? What do you mean this isn’t working— is the script not added to the document? Is it added, but not working how you expect? Is the blocksurvey-widget component registered? etc. Commented Nov 7, 2020 at 14:34
  • Is blocksurvey.io/assets/js/blocksurvey-widget.js a vue component? if YES you need also to register it at components:{} inside export default function Commented Nov 7, 2020 at 14:47
  • The script is added, but the component does not seem to be registered, I suspect I need to include some sort of component? Commented Nov 7, 2020 at 14:53
  • I believe I need to register the component, but I am not too sure how to go about doing so. It should be adding some sort of component name? but i had the assumption it should work given the script appended into the head. Commented Nov 7, 2020 at 14:53
  • I would suggest making the blocksurvey-widget a local js file and placing it in an assets folder. Then in your Vue file import it: import { BlockSurveyWidget } from 'path-to-assets/blocksurvey-widget.js'; Then you can register BlockSurveyWidget` in the script tag components: {} as suggested by gijoe. Commented Nov 8, 2020 at 10:19
Related questions
4
I can't use third party components in Nuxt.js/vue.js
1
Vue.js and Nuxt.js
4
How to Add Client-side Scripts to Nuxt.js?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.