Compile vue-fullscreen with application

[theochit]

Hi, I have a custom video-player Vue application (using vue-fullscreen) that I am packaging on npm, and using within the client of a different Vue application. Vue-fullscreen works in the first application, but for it to work in the client application, I have to install it there too, and add a rule to the vue-loader.

Is there a way to import vue-fullscreen so that it's included in my video-player application? In other words, I would like to be able to use my video-player in projects that don't have vue-fullscreen explicitly installed.

Sorry if this is documented somewhere, I've been looking but can't find it.

[mirari]

It's strange to add a rule to the vue-loader, what is the rule? Normally you just need to run 'npm i vue-fullscreen', and make sure it's in the dependencies of your package.json

[theochit]

I got an error in the parent application before I added this rule. I thought it was because the component method of importing fullscreen imports a Vue file. It's only a symptom of my problem though, is there a way to build your package into my player so that vue-fullscreen doesnt need to be installed in the parent project? I want to decouple my player from my client so the player can be used elsewhere with no friction. Thanks for the response.

  {
      test: /\.vue?$/,
      include: [ path.resolve(__dirname, 'node_modules/vue-fullscreen')],
      use: 'vue-loader'
  }

[mirari]

What's the error? There is no vue file in the dist directory which is the only one that is used. import VueFullscreen from 'vue-fullscreen' means import VueFullscreen from 'vue-fullscreen/dist/vue-fullscreen.min.js', this file has already been compiled. ———— Declaring vue-fullscreen in the dependencies of your package.json of the player project, other people using your player do not need to explicitly install vue-fullscreen. ———— If you're not using fullscreen-api in a vue project, you don't need 'vue-fullscreen', try this: https://github.com/sindresorhus/screenfull.js

[theochit]

It's in my package.json, and to be safe I'm declaring vue-fullscreen this way:

import Fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(Fullscreen, {name: 'fullscreen'})

Which works in my player, but in the client I get this error: Module not found: Error: Can't resolve 'vue-fullscreen' in <path_to_my_player_dist>

Am i missing something?

[mirari]

If 'vue-fullscreen' is in your player's dependencies, it should be installed together with the player when you run 'npm install your-player', check if it is in the node_modules in the client.

[theochit]

It wasn't important at the time so I put it off - it was because I wasn't correctly installing the plugin using Vue.use() I was just using the source code directly I guess