Conditional import in Vue component

Question

I have a root instance that has several CustomVideo-components in it (amongst a bunch of other components). The CustomVideo-component implements VideoJS, but it's not on all pages that there is a CustomVideo-component, so I don't want to import VideoJS globally. Here is an example of components on a page:

App.js
|
|-- CustomVideo
|-- FooComponent
|-- CustomVideo
|-- BarComponent
|-- CustomVideo

In the top of CustomVideo, I import VideoJS, like so:

import videojs from 'video.js';
import abLoopPlugin from 'videojs-abloop'


export default {
  name: "FeaturedVideoPlayer",
  props: {
    videoUrl: String
  }
  mounted() {
    let videoOptions = {
      sources: [
        {
          src: this.videoUrl,
          type: "video/mp4"
        }
      ],
      plugins: {
        abLoopPlugin: {
          'enabled': true
        }
      }
    };

    this.player = videojs(this.$refs.featuredVideoPlayer, videoOptions, function onPlayerReady() {});

  }

But if there are more than one CustomVideo, then I get a console warning:

VIDEOJS: WARN: A plugin named "abLoopPlugin" already exists. You may want to avoid re-registering plugins!

I tried looking into conditional imports, but it doesn't seem like it's the way to do it.

Even if I try and import it in app.js, even though I would rather import it CustomVideo, then I get another console error:

Attempt

import abLoopPlugin from 'videojs-abloop'
Vue.use( abLoopPlugin );

Then I get the error:

Uncaught TypeError: Cannot read property 'registerPlugin' of undefined

How do I ensure that a plugin is registered only once?

Look into the instruction in npm: videojs-abloop, the plugin is one general javascript library, it is not one valid Vue plugin (How to write one plugin. Try to use below codes in app.js. Example: import videojs from 'video.js' import abLoopPlugin from 'videojs-abloop' abLoopPlugin(window,videojs) Refer to Github: Videojs-abloop — Sphinx
– Sphinx, Commented Jul 9, 2020 at 21:15

tony19 · Accepted Answer · 2022-07-16 02:39:13Z

1

+100

Check `videojs.getPlugins().abLoopPlugin`

videojs.getPlugins() returns a symbol table of all loaded plugin names. You could simply check that abLoopPlugin is not in that table before loading it in your component:

import videojs from 'video.js'

if (!videojs.getPlugins().abLoopPlugin) {
  abLoopPlugin(window, videojs)
}

Await `$nextTick` before using `ref`

You'll notice that your videos are initially not visible in your specified <video> element. This is because the ref is undefined when you pass it to videojs in mounted().

The ref docs state:

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet!

The solution is to wait until the $nextTick():

async mounted() {
  // this.$refs.featuredVideoPlayer is undefined here
  await this.$nextTick()

  // this.$refs.featuredVideoPlayer is the <video> here
  this.player = videojs(this.$refs.featuredVideoPlayer)
}

edited Jul 16, 2022 at 2:39

answered Jul 9, 2020 at 23:10

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zeth Over a year ago

Thanks for weighing in. I still got the error, when I did what you suggested ( if( !abLoopPlugin.loaded ) { . When I console.logged abLoopPlugin, then I could see that it was a function (and therefore didn't have any loaded-property. But your answer got me to find the answer, which is to do this: if( ! videojs.getPlugins().abLoopPlugin ){ abLoopPlugin( window, videojs ); } . If you edit your answer to include this (and keep the nice comment on nextTick, then I'll mark your answer as the correct solution.

tony19 Over a year ago

@Zeth Ah, I see that now that I log it. Updated answer and demo.

Paridhi Jain · Accepted Answer · 2020-07-08 20:50:15Z

0

Try creating instance of abLoopPlugin. I followed the same approach for vue-i18n and other plugins to use globally. Something like:

import AbLoopPlugin from 'videojs-abloop'

Vue.use(AbLoopPlugin) // CHECK IF REGISTER PLUGIN ERROR PERSIST

const abLoopPlugin = new AbLoopPlugin({
   ---your settings---
})
export default abLoopPlugin

answered Jul 8, 2020 at 20:50

Paridhi Jain

1905 bronze badges

Collectives™ on Stack Overflow

Conditional import in Vue component

2 Answers 2

Check `videojs.getPlugins().abLoopPlugin`

Await `$nextTick` before using `ref`

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Check videojs.getPlugins().abLoopPlugin

Await $nextTick before using ref

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Check `videojs.getPlugins().abLoopPlugin`

Await `$nextTick` before using `ref`