How to import a script into .vue file?

Question

I am trying to import a player into my vue.js file. Normally I would use a script file outside of the template, but that does not work.

In an html file what I would do is the following:

 <div id="player">
    <div id="vplayer"></div>
 </div>

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>

  <script>
  var urlsrc = "http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8";
  var player = new Clappr.Player({source: urlsrc, parentId: "#vplayer", height: 240, width: 320});
  </script>

In vue.js I am trying to do the same thing with the following return code, but it does not work:

     <template>
      <div id="player">
         <div id="vplayer"></div>
       </div>
     </template>

<script>

export default {

  name: 'player',
  data () {
    return {
      script: 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js',
      url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
      player: new Clappr.Player({source: this.url, parentId: "#vplayer", height: 240, width: 320})
    }
  }
}
</script>

I get an error saying that the player is undefined. How can I get normal scripts to run inside of vue.js?

ittus · Accepted Answer · 2018-05-13 08:56:34Z

One possible solution is adding external script in created() hooks and use script onload method

    <template>
      .... your HTML
    </template>

    <script>
    export default {
        data: () => ({
            url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
            player: null
        }),
        created() {
            let clapprScript = document.createElement('script')
            clapprScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js')
            clapprScript.onload = this.initPlayer;
            document.head.appendChild(clapprScript)
        },
        methods: {
            initPlayer() {
                this.player = new Clappr.Player({
                    source: this.url,
                    parentId: "#vplayer",
                    height: 240,
                    width: 320
                })
                console.log('Player is loaded')
            }
        }
    }
    </script>

tony19 · Accepted Answer · 2022-07-16 01:01:51Z

1

You should use Mixins. Make your own mixin and then add the methods from imported script inside methods section of mixin.

  var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

edited Jul 16, 2022 at 1:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 13, 2018 at 8:37

zivce

4645 silver badges10 bronze badges

Comments

Borisu · Accepted Answer · 2018-05-14 07:31:44Z

0

You should be able to do this, after installing Clappr with npm:

<script>
  import Clappr from 'clappr';
  export default {
      created() {
          let player = Clappr.Player({...});
      }
  }
</script>

This way you can initialize your clappr instance in the Vue component just as you would in vanilla html, js scenario.

answered May 14, 2018 at 7:31

Borisu

8487 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to import a script into .vue file?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related