Mixing
Vue- Import vue components dynamically
3
I have many components, i want to import then on demand. i have a drop down which actually contains components list, that what to load. I tried this example
<component :is="componentLoader"></component>
in script
componentLoader () {
return () => import('@/components/testDynamic')
}
testDynamic is a component name(For now i am trying with static component).
Getting this error
GET http://localhost:8080/0.js net::ERR_ABORTED 404
[Vue warn]: Failed to resolve async component: function () {
return __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, "./src/components/testDynamic.vue"));
}
Reason: Error: Loading chunk 0 failed.
How to fix this? am i doing any thing wrong? or is there any other way to import components dynamically?
javascript vue.js
asked Nov 21 '18 at 6:26
SamSam
18912
|
show 2 more comments
3
I have many components, i want to import then on demand. i have a drop down which actually contains components list, that what to load. I tried this example
<component :is="componentLoader"></component>
in script
componentLoader () {
return () => import('@/components/testDynamic')
}
testDynamic is a component name(For now i am trying with static component).
Getting this error
GET http://localhost:8080/0.js net::ERR_ABORTED 404
[Vue warn]: Failed to resolve async component: function () {
return __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, "./src/components/testDynamic.vue"));
}
Reason: Error: Loading chunk 0 failed.
How to fix this? am i doing any thing wrong? or is there any other way to import components dynamically?
javascript vue.js
asked Nov 21 '18 at 6:26
SamSam
18912
maybe tryreturn () => require('@/components/testDynamic')
– Andrew1325
Nov 21 '18 at 6:28
or, register them globally
– Andrew1325
Nov 21 '18 at 6:32
require doesn't throw any error, but it is not rendering any thing.
– Sam
Nov 21 '18 at 6:34
1
@Andrew1325 Global registration means, it will load all the components in the global level right, all components loaded at once and can use any where. But they all load at once right initially? I want it be import on demand only.
– Sam
Nov 21 '18 at 6:57
Are you compiling your templates? cause maybe it's looking to import on the wrong place, i would suggest to try and load all 50 components, and see how big it really is, see if you even need a solution like the one you think you need... If you really need it, i think you would have to generate/compile each template individually, and then point the import to wherever you put them...
– Erubiel
Nov 21 '18 at 7:01
|
show 2 more comments
3
3
3
I have many components, i want to import then on demand. i have a drop down which actually contains components list, that what to load. I tried this example
<component :is="componentLoader"></component>
in script
componentLoader () {
return () => import('@/components/testDynamic')
}
testDynamic is a component name(For now i am trying with static component).
Getting this error
GET http://localhost:8080/0.js net::ERR_ABORTED 404
[Vue warn]: Failed to resolve async component: function () {
return __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, "./src/components/testDynamic.vue"));
}
Reason: Error: Loading chunk 0 failed.
How to fix this? am i doing any thing wrong? or is there any other way to import components dynamically?
javascript vue.js
asked Nov 21 '18 at 6:26
SamSam
18912
I have many components, i want to import then on demand. i have a drop down which actually contains components list, that what to load. I tried this example
<component :is="componentLoader"></component>
in script
componentLoader () {
return () => import('@/components/testDynamic')
}
testDynamic is a component name(For now i am trying with static component).
Getting this error
GET http://localhost:8080/0.js net::ERR_ABORTED 404
[Vue warn]: Failed to resolve async component: function () {
return __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, "./src/components/testDynamic.vue"));
}
Reason: Error: Loading chunk 0 failed.
How to fix this? am i doing any thing wrong? or is there any other way to import components dynamically?
javascript vue.js
javascript vue.js
asked Nov 21 '18 at 6:26
SamSam
18912
asked Nov 21 '18 at 6:26
SamSam
18912
asked Nov 21 '18 at 6:26
SamSam
18912
asked Nov 21 '18 at 6:26
SamSam
18912
asked Nov 21 '18 at 6:26
SamSam
18912
18912
maybe tryreturn () => require('@/components/testDynamic')
– Andrew1325
Nov 21 '18 at 6:28
or, register them globally
– Andrew1325
Nov 21 '18 at 6:32
require doesn't throw any error, but it is not rendering any thing.
– Sam
Nov 21 '18 at 6:34
1
@Andrew1325 Global registration means, it will load all the components in the global level right, all components loaded at once and can use any where. But they all load at once right initially? I want it be import on demand only.
– Sam
Nov 21 '18 at 6:57
Are you compiling your templates? cause maybe it's looking to import on the wrong place, i would suggest to try and load all 50 components, and see how big it really is, see if you even need a solution like the one you think you need... If you really need it, i think you would have to generate/compile each template individually, and then point the import to wherever you put them...
– Erubiel
Nov 21 '18 at 7:01
|
show 2 more comments
maybe tryreturn () => require('@/components/testDynamic')
– Andrew1325
Nov 21 '18 at 6:28
or, register them globally
– Andrew1325
Nov 21 '18 at 6:32
require doesn't throw any error, but it is not rendering any thing.
– Sam
Nov 21 '18 at 6:34
1
@Andrew1325 Global registration means, it will load all the components in the global level right, all components loaded at once and can use any where. But they all load at once right initially? I want it be import on demand only.
– Sam
Nov 21 '18 at 6:57
Are you compiling your templates? cause maybe it's looking to import on the wrong place, i would suggest to try and load all 50 components, and see how big it really is, see if you even need a solution like the one you think you need... If you really need it, i think you would have to generate/compile each template individually, and then point the import to wherever you put them...
– Erubiel
Nov 21 '18 at 7:01
maybe try
return () => require('@/components/testDynamic')– Andrew1325
Nov 21 '18 at 6:28
maybe try
return () => require('@/components/testDynamic')– Andrew1325
Nov 21 '18 at 6:28
or, register them globally
– Andrew1325
Nov 21 '18 at 6:32
or, register them globally
– Andrew1325
Nov 21 '18 at 6:32
require doesn't throw any error, but it is not rendering any thing.
– Sam
Nov 21 '18 at 6:34
require doesn't throw any error, but it is not rendering any thing.
– Sam
Nov 21 '18 at 6:34
1
1
@Andrew1325 Global registration means, it will load all the components in the global level right, all components loaded at once and can use any where. But they all load at once right initially? I want it be import on demand only.
– Sam
Nov 21 '18 at 6:57
@Andrew1325 Global registration means, it will load all the components in the global level right, all components loaded at once and can use any where. But they all load at once right initially? I want it be import on demand only.
– Sam
Nov 21 '18 at 6:57
Are you compiling your templates? cause maybe it's looking to import on the wrong place, i would suggest to try and load all 50 components, and see how big it really is, see if you even need a solution like the one you think you need... If you really need it, i think you would have to generate/compile each template individually, and then point the import to wherever you put them...
– Erubiel
Nov 21 '18 at 7:01
Are you compiling your templates? cause maybe it's looking to import on the wrong place, i would suggest to try and load all 50 components, and see how big it really is, see if you even need a solution like the one you think you need... If you really need it, i think you would have to generate/compile each template individually, and then point the import to wherever you put them...
– Erubiel
Nov 21 '18 at 7:01
|
show 2 more comments
1 Answer
1
active
oldest
votes
3
You can register async dynamic components locally in a single file component like this:
export default {
components: {
'test-dynamic': () => import('@/components/testDynamic'),
'other-dynamic': () => import('@/components/otherDynamic')
},
data () {
return {
current: 'test-dynamic'
}
}
}
And in your template:
<component :is="current"></component>
If you register multiple components then you would just change the value of current to the desired component.
In the case of many components, you can import an object mapping the component names to their respective file paths, then register them like:
import myComponents from '@/components'
export default {
components: Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {})
...
}
Where myComponents is exported as:
// components/index.js
export default {
foo: '@/path/to/Foo',
bar: '@/path/to/Bar',
...
}
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
In this case, what ever component we mentioned in thecomponentssection, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.
– Sam
Nov 21 '18 at 6:56
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Hey i am trying this'test-dynamic': () => import('@/components/testDynamic'),that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.
– Sam
Nov 21 '18 at 7:15
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
1
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
|
show 6 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406350%2fvue-import-vue-components-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
You can register async dynamic components locally in a single file component like this:
export default {
components: {
'test-dynamic': () => import('@/components/testDynamic'),
'other-dynamic': () => import('@/components/otherDynamic')
},
data () {
return {
current: 'test-dynamic'
}
}
}
And in your template:
<component :is="current"></component>
If you register multiple components then you would just change the value of current to the desired component.
In the case of many components, you can import an object mapping the component names to their respective file paths, then register them like:
import myComponents from '@/components'
export default {
components: Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {})
...
}
Where myComponents is exported as:
// components/index.js
export default {
foo: '@/path/to/Foo',
bar: '@/path/to/Bar',
...
}
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
In this case, what ever component we mentioned in thecomponentssection, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.
– Sam
Nov 21 '18 at 6:56
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Hey i am trying this'test-dynamic': () => import('@/components/testDynamic'),that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.
– Sam
Nov 21 '18 at 7:15
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
1
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
|
show 6 more comments
3
You can register async dynamic components locally in a single file component like this:
export default {
components: {
'test-dynamic': () => import('@/components/testDynamic'),
'other-dynamic': () => import('@/components/otherDynamic')
},
data () {
return {
current: 'test-dynamic'
}
}
}
And in your template:
<component :is="current"></component>
If you register multiple components then you would just change the value of current to the desired component.
In the case of many components, you can import an object mapping the component names to their respective file paths, then register them like:
import myComponents from '@/components'
export default {
components: Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {})
...
}
Where myComponents is exported as:
// components/index.js
export default {
foo: '@/path/to/Foo',
bar: '@/path/to/Bar',
...
}
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
In this case, what ever component we mentioned in thecomponentssection, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.
– Sam
Nov 21 '18 at 6:56
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Hey i am trying this'test-dynamic': () => import('@/components/testDynamic'),that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.
– Sam
Nov 21 '18 at 7:15
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
1
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
|
show 6 more comments
3
3
3
You can register async dynamic components locally in a single file component like this:
export default {
components: {
'test-dynamic': () => import('@/components/testDynamic'),
'other-dynamic': () => import('@/components/otherDynamic')
},
data () {
return {
current: 'test-dynamic'
}
}
}
And in your template:
<component :is="current"></component>
If you register multiple components then you would just change the value of current to the desired component.
In the case of many components, you can import an object mapping the component names to their respective file paths, then register them like:
import myComponents from '@/components'
export default {
components: Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {})
...
}
Where myComponents is exported as:
// components/index.js
export default {
foo: '@/path/to/Foo',
bar: '@/path/to/Bar',
...
}
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
You can register async dynamic components locally in a single file component like this:
export default {
components: {
'test-dynamic': () => import('@/components/testDynamic'),
'other-dynamic': () => import('@/components/otherDynamic')
},
data () {
return {
current: 'test-dynamic'
}
}
}
And in your template:
<component :is="current"></component>
If you register multiple components then you would just change the value of current to the desired component.
In the case of many components, you can import an object mapping the component names to their respective file paths, then register them like:
import myComponents from '@/components'
export default {
components: Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {})
...
}
Where myComponents is exported as:
// components/index.js
export default {
foo: '@/path/to/Foo',
bar: '@/path/to/Bar',
...
}
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
edited Nov 21 '18 at 7:11
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
answered Nov 21 '18 at 6:49
DigitalDrifterDigitalDrifter
8,3572624
8,3572624
In this case, what ever component we mentioned in thecomponentssection, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.
– Sam
Nov 21 '18 at 6:56
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Hey i am trying this'test-dynamic': () => import('@/components/testDynamic'),that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.
– Sam
Nov 21 '18 at 7:15
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
1
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
|
show 6 more comments
In this case, what ever component we mentioned in thecomponentssection, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.
– Sam
Nov 21 '18 at 6:56
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Hey i am trying this'test-dynamic': () => import('@/components/testDynamic'),that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.
– Sam
Nov 21 '18 at 7:15
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
1
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
In this case, what ever component we mentioned in the
components section, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.– Sam
Nov 21 '18 at 6:56
In this case, what ever component we mentioned in the
components section, will be loaded initially right? i have almost 50 components, Importing all those components/files are heavy right? That why i am trying to import component on demand.– Sam
Nov 21 '18 at 6:56
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Nope, they are loaded only when needed.
– DigitalDrifter
Nov 21 '18 at 7:07
Hey i am trying this
'test-dynamic': () => import('@/components/testDynamic'), that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.– Sam
Nov 21 '18 at 7:15
Hey i am trying this
'test-dynamic': () => import('@/components/testDynamic'), that what you mentioned in the component section, but still i am getting same error, which i have mentioned in the issue.– Sam
Nov 21 '18 at 7:15
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
Are you using vue cli and/or babel? Sounds like it isnt transpiling the code correctly?
– DigitalDrifter
Nov 21 '18 at 7:17
1
1
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
– DigitalDrifter
Nov 21 '18 at 7:28
|
show 6 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406350%2fvue-import-vue-components-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
maybe try
return () => require('@/components/testDynamic')– Andrew1325
Nov 21 '18 at 6:28
or, register them globally
– Andrew1325
Nov 21 '18 at 6:32
require doesn't throw any error, but it is not rendering any thing.
– Sam
Nov 21 '18 at 6:34
1
@Andrew1325 Global registration means, it will load all the components in the global level right, all components loaded at once and can use any where. But they all load at once right initially? I want it be import on demand only.
– Sam
Nov 21 '18 at 6:57
Are you compiling your templates? cause maybe it's looking to import on the wrong place, i would suggest to try and load all 50 components, and see how big it really is, see if you even need a solution like the one you think you need... If you really need it, i think you would have to generate/compile each template individually, and then point the import to wherever you put them...
– Erubiel
Nov 21 '18 at 7:01