How to inset <script> into div in nuxt

0
votes

Maybe someone came across such a problem and can suggest how to solve it: I need to insert the script into a special div. And this script changes the DOM. Insets block, adds classes and styles. It is external script and it renders this page. There is no problem in Vue. then Nuxt throws errors. can someone suggest what to do about it?)

error:

nuxt-error.vue?48f2:14 Uncaught TypeError: Cannot read property 'accept' of undefined at eval (VM6157 nuxt-error.vue:14) at Object../node_modules/vue-style-loader/index.js?!./node_modules/@nuxt/webpack/node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (app.js:437) at a (app.js:2) at eval (VM6156 nuxt-error.vue:2) at Module../.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (app.js:119) at a (app.js:2) at eval (VM6151 nuxt-error.vue:4) at Module../.nuxt/components/nuxt-error.vue (app.js:95) at a (app.js:2) at eval (VM6142 index.js:35)

<template>
    <div class="skin" ref="scriptHolder">
      <div id="hwm-ubs-ticketsystem" data-id="757d440c95b9539fd9f79b8407fb8e9fe23b23315cfe6085">      </div>
    </div>
</template>

<script>

export default {
  components: {
  },
  mounted() {
    let scriptEl = document.createElement('script')
    scriptEl.src = 'https://site/assets/js/app.js'
    scriptEl.type = "text/javascript"
    let styleEl = document.createElement('link')
    styleEl.setAttribute('href', 'https://site/assets/css/app.css')
    styleEl.setAttribute('rel', 'stylesheet')
    const divEl = document.querySelector('#hwm-ubs-ticketsystem')
    this.$refs['scriptHolder'].insertBefore(styleEl, divEl)
    this.$refs['scriptHolder'].appendChild(scriptEl)
  }

}
</script>

<style>

</style>

enter image description here

javascriptvue.jsvuejs2nuxt.jsnuxtjs
When do you want to execute this script? When the page renders or on click? – foka135
When the page renders – Marina
If you want to add a class for example you could just use v-bind and add a class when the page renders – foka135
For that you just need to define a Boolean in data() for example pageLoaded: false, I think this page explains it better vuejs.org/v2/guide/class-and-style.html – foka135
Yes, but it is external script and I can't edit it. All actions on this page must be performed by this script. All classes and styles adds by external script too. It render content this page – Marina