Я хочу Nuxt js визуализировать Vue -компоненты динамически. В Vuejs я так работаю. Но это не работает с nuxt, который я не понимаю:
https://codesandbox.io/s/young-wood-lw0gl
<html>
<head>
<title>Vue Component Blog Post Example</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<div id="dynamic-component-demo">
<component v-bind:is="testcomp" class="tab"></component>
</div>
<script>
new Vue({
el: "#dynamic-component-demo",
data: {
text: "Text",
button: "<button>Save</button>",
currentTab: "Posts",
tabs: ["Posts", "Archive"]
},
computed: {
testcomp() {
Vue.component("testcomp", {
template: `<div>Archive components ${this.text}
${this.button}
</div>`
});
return "testcomp";
}
}
});
</script>
</body>
</html>
Но в Nuxt js, он ничего не показывает
<template>
<section>
test
<component v-bind:is="testcomp" class="tab"></component>
</section>
</template>
<script>
import Vue from 'vue'
export default {
data() {
return {
text: 'Test',
button: '<button>Save</button>'
}
},
computed: {
testcomp() {
Vue.component("testcomp", {
template: `<div>Archive components ${this.text}
${this.button}
</div>`
});
return "testcomp";
}
}
}
</script>
Полагаю, мне нужно обернуть его в Nuxt где-нибудь или около vue.use(). Но я точно не уверен