how to import js file correctly in vue

March 19, 2023

i import js-cloudimage-360-view(https://github.com/scaleflex/js-cloudimage-360-view) into index.html, but the code in vue template didn’t render successful and display nothing, chrome console didn’t report any error. And in my test, when the code paste in index.html it’s worked, but in myComponent.vue failed.
How to import js-cloudimage-360-view.min.js fully functional

import js in index.html

<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>
</body>
</html>

failed in ***.vue file

<template>
    <div
        id="gurkha-suv"
        class="cloudimage-360"
        data-amount-x="73"
        data-filename-x="orange-{index}.jpg"
        data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
    ></div>
</template>

<script>
export default {
    name: "ShowComponent",
    mounted() {

    }
}
</script>

I’ve tryyed useing npm module, but the doc didn’t show the method how to import plugins correct in vue. (https://www.npmjs.com/package/js-cloudimage-360-view)
And i copy paste code directly in to index.html not vue (outside the #app div), and the code worked

<div id="app"></div>
<div
        id="gurkha-suv"
        class="cloudimage-360"
        data-amount-x="73"
        data-filename-x="orange-{index}.jpg"
        data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
></div>
<!-- built files will be auto injected -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>

I’am expecting the code work functional inside vue, this js detect div with "cloudimage-360" class name and render correct.

>Solution :

Try import it in mounted hook:

<template>
    <div
        id="gurkha-suv"
        class="cloudimage-360"
        data-amount-x="73"
        data-filename-x="orange-{index}.jpg"
        data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
    ></div>
</template>

<script>
export default {
    name: "ShowComponent",
    mounted() {
      const scriptEl = document.createElement("script");
      scriptEl.setAttribute(
        "src",
        "https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"
      );
      scriptEl.async = true;
      document.head.appendChild(scriptEl);
    }
}
</script>