Create alias for a vue component?

Question

I want to rename or create an alias a Vue component exported from inside a plugin.

Let's say this is how I use the library

import VModal from "vue-js-modal";
Vue.use(VModal);

This exposes a modal component to me. And I want use it all over my app as my-modal how can this be done?

P.S. Some libraries do provide a way to rename this, but I want to be able to change it on my end due to some limitation.

Answer 1

The name of what you import only matters when you import something using curly braces, since you are importing specific things from that file/package/whatever.

If you don't use curly braces, you are just importing whatever is exported as default from that file/package/whatever and can therefore give it whatever name you want.

For example, something like this means "import specifically x and y from z":

import { x, y } from 'z'

These names, x and y, need to correspond with something exported in z with those names.

---

Something like this however is just saying "import the default thing from z and give it the alias MyThing":

import MyThing from 'z'

---

If you want to give a non-default import a name, you'd need to do something like this:

import { x as MyThing } from 'z'

This will import the non-default thing x and give it the alias MyThing.