How to publish a vue js plugin that modifies an existing plugin

Question

I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.

I thought it would just be a matter of:

1. Create a github repo for the shared components
2. Author the plugin
3. Reference the repo in consuming apps via npm install

Here is the gist of the plugin:

// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";

export default function install(Vue) {
    Vue.component("myComponent", MyComponent );
    Vue.prototype.$myApi = api;
}

At the moment, the behavior I'm seeing is:

GOOD

• plugin install function is being executed
• functions from api attached to Vue.prototype are available in app components
• my-component is available in the app and renders markup

BAD

• $myApi and Vuetify components are not available in an application instance of of my-component

If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.

I've tried these alternatives with the same issue:

• use npm link to link the plugin module to the app
• manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
• use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"

Answer 1

I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.

The 2 options I have are:

1. Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
2. Compile the .vue files in the library module and include them in the source such as ./dist folder.