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,
},
Related
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.
I have just started my first project with Vue.js, I have managed to do a lot of basic things and now I am trying to structure the project. I want to achieve the highest possible code reuse. One of the most frequent cases of my application is going to be showing messages of different types, confirmation, information, etc. For this reason, I want to create a mechanism that allows me to launch these messages globally, regardless of where I call them.
As far as I have been able to advance, I have opted for the following variant:
1- I have created a directory called classes in my src directory.
2- I have created a file called MessageBox.js inside classes directory with the following content:
import Vue from 'vue';
export default class MessageBox extends Vue {
confirm() {
return alert('Confirm');
}
information() {
return alert('Information');
}
}
I define it like this because I want to call these methods globally as follows:
MessageBox.confirm();
I am really new to Vue.js and I was wondering if there is any other way to achieve the results I am looking for in a more efficient way .... or .. maybe more elegant?
Thank you very much in advance..
There are at least 2 ways of going about this:
Event bus
Rely on Vue.js internals to create a simple EventBus. This is a design pattern used in Vue.js.
Create a file and add the following lines to it
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
Create your component that takes care of displaying global dialogs. This is usually registered at the top of the tree, so it can cover the entire real estate.
Import the event bus import EventBus from 'event_bus' and then register for the new events
EventBus.$on('SHOW_CONFIRM', (data) => {
// business logic regarding confirm dialog
})
Now you can import it in any component that wants to fire an event like so
EventBus.$emit('SHOW_CONFIRM', confirmData);
Vuex
You can also use vuex to store global data regarding dialogs and add mutations to trigger the display of the dialogs.
Again, you should define a component that takes care of displaying and push it towards the top of the visual tree.
Note: in both cases you should handle cases in which multiple dialog need to be shown at the same time. Usually using a queue inside the displaying component works.
It's an antipattern in modern JavaScript to merge helper functions that don't rely on class instance into a class. Modules play the role of namespaces.
Helper functions can be defined as is:
messageBox.js
export function confirm() {
return alert('Confirm');
}
They can be imported and used in component methods. In case they need to be used in templates, they can be assigned to methods where needed one by one:
Some.vue
import { confirm } from './util/messageBox';
export default {
methods: { confirm }
}
Or all at once:
import * as messageBox from './util/messageBox';
export default {
methods: { ...messageBox }
}
Helpers can be also be made reusable as Vue mixins:
messageBox.js
...
export const confirmMixin = {
methods: { confirm };
}
export default {
methods: { confirm, information };
}
And used either per component:
Some.vue
import { confirmMixin } from './util/messageBox';
export default {
mixins: [confirmMixin]
}
Or globally (isn't recommended because this introduces same maintenance problems as the use of global variables):
import messageBoxMixin from './util/messageBox';
Vue.mixin(messageBoxMixin);
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>
I'm new to Vue and was just assigned to an existing Vue project. I noticed the computed properties of one component were getting to around 200 lines. Can computed properties be relocated into an external .ts file and imported? If so, what would the import look like?
Everything I've seen has the computed properties located in the component itself. I'm not even sure it's 'allowed', and if it is I wouldn't know how to import it and then utilize it in the component.
I appreciate the help!
Well I don't know if it helps but you can create a mixin. Read here about them
So you have computed.js:
export const computed = {
computed: {
my_comp_prop() {
//some code
}
}
}
And then in your components:
import { computed } from './computed'
export default {
mixins: [computed],
//more code
}
In the end everything will merge in your component instance. Please don't forget to read about mixins and also about Custom Option Merge Strategies
I'll try to be short but clear.
I downloaded a template of Vuejs for admin (from here), but I am having troubles modifying it. I created one new component but I can't use it because is not being recognized. The console error says:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I don't know why is this happening because I am importing the component as every other one. Look the script code in the father component.
import LTable from 'src/components/UIComponents/Tables/Table.vue'
import ETable from 'src/components/UIComponents/Tables/EditableTable.vue' //THIS IS MY NEW COMPONENT
import Card from 'src/components/UIComponents/Cards/Card.vue'
const tableColumns = [//some data]
const tableData = [//some data]
export default {
components: {
LTable,
ETable, //THIS IS MY NEW COMPONENT
Card
},
data () {
return {
//some data
}
},
//some methods
}
Of course the name tag in my new component is 'edit-table'.
There is happening other strange issue: when I change the name value in the component imported as 'LTable' it seems not to matter because everything keeps working good.
Please, any help is appreciated it.