Is it possible to include a Vue.js component from a URL?

Question

We are designing a plugin architecture and are curious if there is a way to allow including 3rd party plug-ins as Vue components through a URL.

How can I import a vue file from a remote url? For example, I am attempting to follow Alex Jover Morales's approach to importing an async componentAsync vue.js components. In this approach, when a user clicks an "import plugin" button, a vue component should appear that is imported from a url. I published the vue component that I'd like to import on a github page.

The app cannot resolve the url. Why not? What must I do to fix this? Import error

This is the code for my vue component that is doing the importing...

  <div v-if="showPlugin">
    <MassEmailerPlugin>
    </MassEmailerPlugin>
    <button @click.prevent="addPlugin">Add Plugin</button>
  </div>
</template>

<style>
</style>

<script>
export default {
  name: "Plugins",
  components: {   
    MassEmailerPlugin: () => import('https://github.com/gideongrossmanHome/test-vuejs-plugin/blob/master/index.html')
  },

  data() {
    return {
      showPlugin: false
    }

  },

  methods: {
    addPlugin() {
      this.showPlugin = true;
      console.log("showing plugin");
    }
  }
};
</script>

Here is the component that I am trying to import...

<template>
    <div>
        Plugin from url
    </div>
</template>

<script>
export default {
    name: "MassEmailerPlugin"
}
</script>

Answer 1

There are a few issues with your current implementation:

• The dynamic import statement that you have is to the GitHub.com web page, not the the code of the component itself. If you just want the code, you should click on the "Raw" button on the top right of the page that will give you an URL like this: https://raw.githubusercontent.com/gideongrossmanHome/test-vuejs-plugin/master/index.html.
• Your Vue component should be declared as .vue and not .html.
• Even then, you need to somehow compile the Vue component from the .vue file and register it inside the Vue instance for it to work.

What you can do if you REALLY want to use components from remote URLs is compile them to JS code using webpack and import that dynamically like in your code. However, allowing external JS to run on your own site is extremely dangerous and might open you up to XSS attacks.

Instead, if you are working on something that will be used internally, I suggest you have a look at being able to export your plugin as an npm package. That way, you can just import it if needed (still works with dynamic imports) and is packaged nicely as a working and reusable package. Here is the basic guide on how to do that but you might need more research: https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html.

Answer 2

I agree with the previous comment. I think the main thing is that the code you are importing may need to be compiled to plain ol' JavaScript before you can import it (and you also need to import the actual source, not the GitHub page).

Another recommendation I would make is to simply copy the component you are trying to import into your project somewhere (maybe like /src/vendor/Component.vue for third party things) and then you can dynamically import it into your project like any other component. This approach has the benefit of not requiring you to compile the third party component since it will become part of your source code.

And if copying the code into your repo is not an option, perhaps this third party plugin is available via npm install? If it's on NPM, you could install it from there, and if it's just on GitHub, you might still be able to install it. Then still go for dynamic import.

Hope that helps.