How to import multiple components with the same name in a Vuejs project? - vue.js

I've inherited a Vue.js project that, among other things, has this:
import Multiselect from 'vue-multiselect';
<multiselect :multiple="true"
v-model="selectedTags"
:options="tagOptions"
label="title"
track-by="id"></multiselect>
Now, on the same page, we are also supposed to have a different multiselect object, imported from a different place, that looks like:
import Multiselect from './../../../../../../vendor/devcompany/scripts/vue/components/form/multiselect.vue';
<multiselect v-model="selectedTeacherIds"
:sortable="true"
:options="computedTeacherOptions">
<template slot="selected-option-value" slot-scope="{optionKey}">
{{teacherNames[optionKey]}}
</template>
Each of these works well individually, but I am supposed to somehow import both of them and use them both within the same component. Clearly this will not work without some sort of alteration to the code.
Is there some syntax to, perhaps, import as and thus change the name of one of the objects? Or do I need to go into the source code of one of them and change the naming there? The former (or some other solution not requiring changing the multiselect core files themselves) would be more desirable.
EDIT: This is what the code looks like more broadly.
import Multiselect from 'vue-multiselect';
import BbcodeEditor from './../elements/bbcode-editor';
import ApiVideoSelect from './api-video-select';
/* import other assets */
export default {
components: {ApiVideoClassDetail, ApiProgramCard, ApiUploader, Multiselect, Draggable, Datepicker, BbcodeEditor, ApiVideoSelect},
So I am wondering how to edit this syntax to add the other multiselect under a different name. I don't see how this could work:
import Multiselect from 'vue-multiselect';
import Multiselect from './../../../../../../vendor/frismedia/scripts/vue/components/form/multiselect.vue';

You do not have to change core files, just change the name while using the component:
import Multiselect from '....vue/components/form/multiselect.vue';
// your parent component
export default {
components: {
'my-custom-multiselect' : Multiselect
}
}
// in template:
<my-custom-multiselect> </my-custom-multiselect>
A simpler syntax: Change the name while importing
import MyCustomMultiselect from '....vue/components/form/multiselect.vue';
export default {
components: {
MyCustomMultiselect
}
}
// in template:
<my-custom-multiselect> </my-custom-multiselect>

Related

vue multiple components in a single file

in vue documents I saw "Namespaced Components" in "script setup" guide it writes:
You can use component tags with dots like <Foo.Bar> to refer to components nested under object properties. This is useful when you import multiple components from a single file:
<script setup>
import * as Form from './form-components'
</script>
<template>
<Form.Input>
<Form.Label>label</Form.Label>
</Form.Input>
</template>
I wanted to know in this example what will the form-component look like, and what is the correct use case for such a component, does it have anything to do with "slot" or not.
In this case, form-components refers to a .js file that seems to be exporting single-file components (.vue).
form-components.js
export { default as Label } from './form-label.vue'
export { default as Input } from './form-input.vue'
You can then access these components via:
import * as Form from './form-components'
However, I recommend using a destructuring assignment methodology, as it is better interpreted by IDEs.
import { Input, Label } from './form-components'

How to dynamically import multiple Vue.js components at once?

I'm trying to import multiple components from a folder conditionally. The first example works, but I need to get it working conditionally like in the last example that doesn't work. Otherwise I'd have to always go and change which components should import manually, after adding one to the project folder.
I've also tried wrapping the imports into a function, but I can't get the import * as components syntax to work. Importing one component works fine, but not with * return () => import * as components '#/components/index'
This works
import * as components from '#/components/index'
export default {
components: {
...loadedComponents
}
}
index.js and electronIndex.js
export {
default as one
}
from './One.vue'
export {
default as two
}
from './Two.vue'
This of course doesn't work, but demonstrates what I need
I also tried importing conditionally via functions like stated above, but can't get that to work either.
const IPC = window.ipcRenderer
if (IPC) {
import * as components from '#/components/electronIndex'
} else {
import * as components from '#/components/index'
}
export default {
components: {
...loadedComponents
}
}

how to import many vue component to my vue page?

i dont want to write a lot of import from.
import button1 from './components/button1'
import button2 from './componnets/button2'
import table1 from './componnets/table2'
...
Is there any good way to do it quickly?
How many way to do this thing?
following this pattern you can dynamically import components as well:
computed: {
comp () {
return () => import(`#/components/${this.componentName}.vue`)
}
}
and then use it like:
<template>
<component :is="comp"></component>
</template>
You could import and register the Vue Components globally in your index file:
import button1 from './components/button1'
Vue.component('button1', button1);
See the official documentation for more information: https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration
You may try require.context, look at the example in the official documentation, this should be enough to solve your problem. For more information about require.context, see this question.

How to import multiple vue files as one

In other to avoid multiple imports into my vuejs app I created an index.js file and imported all the files in it like so:
import AddMember from "./AddMember.vue";
import EditMember from "./EditMember.vue";
export {
AddMember,
EditMember,
};
Then in my component compenent I imported them like so:
import * as Members from "../members/index.js";
export default {
name: "members-table",
components: {
AddMember: Members.AddMember
EditMember: Members.EditMember,
},
}
The EditMember Component is a dialog that opens up per the member clicked. But Anytime I click on a member on a the table I get and error that looks like this: even though the name prop was defined in all the components.
Unknown custom element: <edit-member> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I resolved the problem my importing the EditMember.vue file itselfimport EditMember from './EditMember';. My question however, is there a way I can achieve this. Or better still what I'm I missing or did wrong.
well if it`s reusable components your trying to do so wouldnt it be better to create base components? and then you dont need to import them each time?
import { AddMember, EditMember } from "../members/index.js"; this should work like #Asimple said
Maybe you can try to import them separately?
Like this:
import { AddMember, EditMember } from "../members";
Update:
Changed import source, please, try it.
Working example here
Try this, you may need to create alias as:
components: {
'AddMember': Members.AddMember, // use single quotes
'EditMember': Members.EditMember,
},

Importing external js library in Vue.js Single File Component

I have the following Single File Component in Vue.js.
The plasmid tag is meant to get rendered by the angularplasmid.complete.min.js file but isn't for some reason. Is this the correct way to import a library in a component?
I am restructuring an old Vue project to be better designed but I know that the plasmid tag renders on here (which doesn't use single file components): https://github.com/asselinpaul/dnaviewer/blob/master/app/index.html
Any help much appreciated.
<template>
<div id="DNA Plasmid">
<h3>Plasmid Visualisation</h3>
<div class="section">
<plasmid id='p1' plasmidheight="800" plasmidwidth="800" v-bind:sequencelength="sequenceLength">
<plasmidtrack id='t1' radius="200" width="55">
<trackmarker v-for="(bound, index) in bounds" class='marker' v-bind:start="bound.start" v-bind:end="bound.end" v-bind:style="{ fill: bound.color }" v-bind:key="bound.start">
<markerlabel v-bind:text="bound.name" v-bind:vadjust='bound.vadjust' style='font-size:12px'></markerlabel>
</trackmarker>
<tracklabel v-bind:text="name" style='font-size:25px;font-weight:bold'></tracklabel>
</plasmidtrack>
</plasmid>
</div>
</div>
</template>
<script>
import './angularplasmid.complete.min.js'
...
Solved by requiring the file when my component is mounted:
mounted: function(){
require('./angularplasmid.complete.min.js')
}
You definitely can't reasonably combine angular functions with Vue. Plus, angular use its own dependency system.
Beside, you can use import in a single-file component exactly the same way than in any script. But of course be sure that your imported script is actually exporting something (or is relevant to execute as a module, which is probably not the case here).
Here is a reminder of the syntax:
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Note that the commonJS require() and module.exports are also perfectly fine in a single-file component.