Nuxt: problem with adding external resources

Question

I'm trying to add a Survey.js survey to a Nuxt project. I'm adding the external resources as per the official documentation

<template>
  <div class="container">
    <div id="surveyContainer"><survey :survey="survey"></survey></div>
  </div>
</template>

<script>

export default {
  head() {
    return {
      script: [
        {
          src: "https://surveyjs.azureedge.net/1.7.27/survey.vue.min.js"
        }
      ],
      link: [
        {
          rel: "stylesheet",
          href: "https://surveyjs.azureedge.net/1.7.27/survey.css"
        }
      ]
    };
  },
  mounted() {
    var surveyJSON = { /* json data */   };

    function sendDataToServer(survey) {
      //send Ajax request to your web server.
      alert("The results are:" + JSON.stringify(survey.data));
    }

    var survey = new Survey.Model(surveyJSON);
    new Vue({ el: "#surveyContainer", data: { survey: survey } });
  }
};
</script>

This gives me:

ReferenceError: Survey is not defined

So somehow the js included in the head() is not available in mounted() it seems. I'm new to both Nuxt and Survey.js, so I'm not sure. Anyone who can help?

Why you don't add survey as package? `npm install survey-vue` and then import to use it — Emīls Gulbis, Aug 20 '20 at 10:46
Thanks, I tried this too at first, but it gives me "Cannot read property 'css' of undefined", because of some dependencies. JQuery and Bootstrap I guess, but even after adding them I couldn't get rid of the error. There might be other workarounds too, like saving the js locally and import it, but I'd like to know why my solution doesn't work.. — dan, Aug 20 '20 at 11:11

score 1 · Answer 1 · answered Aug 21 '20 at 09:50

Working version:

<template>
    <div id="surveyContainer"><survey :survey="survey"></survey></div>
</template>

<script>
import * as SurveyVue from "survey-vue";

export default {
  head() {},
  data() {
    var surveyJSON = {
 "pages": [
  //  survey content
 ]
};

    var model = new SurveyVue.Model(surveyJSON);

    return {
      survey: model,
    };
  },

  methods: {
    sendDataToServer(survey) {
      //send Ajax request to your web server.
      alert("The results are:" + JSON.stringify(survey.data));
    }
  }
};
</script>

Problem was not about how to include the external resource but mixing 'vanilla' Vue and Nuxt code I think (not an expert in either)

new Vue({ el: "#surveyContainer", data: { survey: survey } });

Nuxt: problem with adding external resources

1 Answers1