Dynamically fetch and compile a template with Nuxt
I want to fetch an svg from a remote and bring it to life by compiling it. With 'bring to life' I mean selecting some of it's elements by class and dynamically append a list of components into it.
Right now I just use <div v-html="svg"/> and my component looks like this:
data() {
return {
svg: '',
}
},
async created() {
let res = await axios.get(mySvgSrc)
this.svg = res.data
}
But this doesn't allow me to bring it to life by inserting elements with vue bindings.
Thus, I would like to use dynamic components like <component :is="compName"></component> so after fetching my svg, use the result as template. Example js fiddle here.
data() {
return {
compName: 'someDefaultComponent',
}
},
async created() {
let res = await axios.get(mySvgSrc)
Vue.component('svgComponent', { template: res.data })
this.compName = 'svgComponent'
}
However, nuxt keeps complaining about it not being able to compile it:
[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-included build.
What should I do?
1) Somehow convert the svg (string) template into a render function after fetching it?
2) Use the compiler-included build? (rather not, but if so: how does that work?)
I have the feeling that I need option 2) in order to do option 1).
EDIT
Just found v-runtime-template, not sure if it's the vue way-to-go though...
vue.js nuxt.js
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
add a comment |
I want to fetch an svg from a remote and bring it to life by compiling it. With 'bring to life' I mean selecting some of it's elements by class and dynamically append a list of components into it.
Right now I just use <div v-html="svg"/> and my component looks like this:
data() {
return {
svg: '',
}
},
async created() {
let res = await axios.get(mySvgSrc)
this.svg = res.data
}
But this doesn't allow me to bring it to life by inserting elements with vue bindings.
Thus, I would like to use dynamic components like <component :is="compName"></component> so after fetching my svg, use the result as template. Example js fiddle here.
data() {
return {
compName: 'someDefaultComponent',
}
},
async created() {
let res = await axios.get(mySvgSrc)
Vue.component('svgComponent', { template: res.data })
this.compName = 'svgComponent'
}
However, nuxt keeps complaining about it not being able to compile it:
[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-included build.
What should I do?
1) Somehow convert the svg (string) template into a render function after fetching it?
2) Use the compiler-included build? (rather not, but if so: how does that work?)
I have the feeling that I need option 2) in order to do option 1).
EDIT
Just found v-runtime-template, not sure if it's the vue way-to-go though...
vue.js nuxt.js
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
add a comment |
I want to fetch an svg from a remote and bring it to life by compiling it. With 'bring to life' I mean selecting some of it's elements by class and dynamically append a list of components into it.
Right now I just use <div v-html="svg"/> and my component looks like this:
data() {
return {
svg: '',
}
},
async created() {
let res = await axios.get(mySvgSrc)
this.svg = res.data
}
But this doesn't allow me to bring it to life by inserting elements with vue bindings.
Thus, I would like to use dynamic components like <component :is="compName"></component> so after fetching my svg, use the result as template. Example js fiddle here.
data() {
return {
compName: 'someDefaultComponent',
}
},
async created() {
let res = await axios.get(mySvgSrc)
Vue.component('svgComponent', { template: res.data })
this.compName = 'svgComponent'
}
However, nuxt keeps complaining about it not being able to compile it:
[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-included build.
What should I do?
1) Somehow convert the svg (string) template into a render function after fetching it?
2) Use the compiler-included build? (rather not, but if so: how does that work?)
I have the feeling that I need option 2) in order to do option 1).
EDIT
Just found v-runtime-template, not sure if it's the vue way-to-go though...
vue.js nuxt.js
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
I want to fetch an svg from a remote and bring it to life by compiling it. With 'bring to life' I mean selecting some of it's elements by class and dynamically append a list of components into it.
Right now I just use <div v-html="svg"/> and my component looks like this:
data() {
return {
svg: '',
}
},
async created() {
let res = await axios.get(mySvgSrc)
this.svg = res.data
}
But this doesn't allow me to bring it to life by inserting elements with vue bindings.
Thus, I would like to use dynamic components like <component :is="compName"></component> so after fetching my svg, use the result as template. Example js fiddle here.
data() {
return {
compName: 'someDefaultComponent',
}
},
async created() {
let res = await axios.get(mySvgSrc)
Vue.component('svgComponent', { template: res.data })
this.compName = 'svgComponent'
}
However, nuxt keeps complaining about it not being able to compile it:
[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-included build.
What should I do?
1) Somehow convert the svg (string) template into a render function after fetching it?
2) Use the compiler-included build? (rather not, but if so: how does that work?)
I have the feeling that I need option 2) in order to do option 1).
EDIT
Just found v-runtime-template, not sure if it's the vue way-to-go though...
vue.js nuxt.js
vue.js nuxt.js
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
edited Oct 8 '18 at 20:07
Raymundus
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
asked Oct 8 '18 at 16:52
RaymundusRaymundus
94211026
94211026
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You need to change Vue build.
Add this string:
config.resolve.alias['vue'] = 'vue/dist/vue.common'
to nuxt.config.js
here:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.resolve.alias['vue'] = 'vue/dist/vue.common'
edited Jan 18 at 21:49
JJJ
29.1k147591
answered Jan 18 at 21:28
TimofeyTimofey
111
add a comment |
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
});
}
});
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%2f52706863%2fdynamically-fetch-and-compile-a-template-with-nuxt%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
You need to change Vue build.
Add this string:
config.resolve.alias['vue'] = 'vue/dist/vue.common'
to nuxt.config.js
here:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.resolve.alias['vue'] = 'vue/dist/vue.common'
edited Jan 18 at 21:49
JJJ
29.1k147591
answered Jan 18 at 21:28
TimofeyTimofey
111
add a comment |
You need to change Vue build.
Add this string:
config.resolve.alias['vue'] = 'vue/dist/vue.common'
to nuxt.config.js
here:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.resolve.alias['vue'] = 'vue/dist/vue.common'
edited Jan 18 at 21:49
JJJ
29.1k147591
answered Jan 18 at 21:28
TimofeyTimofey
111
add a comment |
You need to change Vue build.
Add this string:
config.resolve.alias['vue'] = 'vue/dist/vue.common'
to nuxt.config.js
here:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.resolve.alias['vue'] = 'vue/dist/vue.common'
edited Jan 18 at 21:49
JJJ
29.1k147591
answered Jan 18 at 21:28
TimofeyTimofey
111
You need to change Vue build.
Add this string:
config.resolve.alias['vue'] = 'vue/dist/vue.common'
to nuxt.config.js
here:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.resolve.alias['vue'] = 'vue/dist/vue.common'
edited Jan 18 at 21:49
JJJ
29.1k147591
answered Jan 18 at 21:28
TimofeyTimofey
111
edited Jan 18 at 21:49
JJJ
29.1k147591
edited Jan 18 at 21:49
JJJ
29.1k147591
edited Jan 18 at 21:49
JJJ
29.1k147591
29.1k147591
answered Jan 18 at 21:28
TimofeyTimofey
111
answered Jan 18 at 21:28
TimofeyTimofey
111
answered Jan 18 at 21:28
TimofeyTimofey
111
111
add a comment |
add a comment |
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.
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%2f52706863%2fdynamically-fetch-and-compile-a-template-with-nuxt%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
