[英]NuxtJS / Vue.js - Import external component
I am trying to add a widget/plugin/extension system to my existing web ui written with NuxtJS.我正在尝试向我现有的用 NuxtJS 编写的 web ui 添加一个小部件/插件/扩展系统。 I have a pages/view.vue
single-file component where I would like to implement the extension system.我有一个pages/view.vue
单文件组件,我想在其中实现扩展系统。 My idea so far is to load dynamically component into the single-file component indicated via a query parameter eg /view?extension=example-a
.到目前为止,我的想法是将组件动态加载到通过查询参数指示的单文件组件中,例如/view?extension=example-a
。
Idea 1理念一
So far the best i could find is something like this: Include external javascript file in a nuxt.js page .到目前为止,我能找到的最好的是这样的: 在 nuxt.js 页面中包含外部 javascript 文件。 I am just not sure, how the compiled their component, because I tried to build a webpack resource from my example-a component, but couldn't import it in the end like the example above.我只是不确定如何编译它们的组件,因为我试图从我的示例组件构建一个 webpack 资源,但最终无法像上面的示例那样导入它。 This was the error message [Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
这是错误消息[Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Idea 2想法 2
Thought I could do it with the http-vue-loader , but I do not know where to start以为我可以用http-vue-loader来做,但我不知道从哪里开始
Idea 3想法 3
Maybe I am thinking to far and there is even a easier solution.也许我想得很远,甚至还有一个更简单的解决方案。
You need to directly load all your component into your code.您需要将所有组件直接加载到代码中。 Then you can find your parameter from url in this.$route.query.extension
(if you use vue-router) and then load component you want by <component:is="..."/>
putting into 'is' a component you want.然后你可以在this.$route.query.extension
中找到你的参数 url (如果你使用 vue-router)然后通过<component:is="..."/>
加载你想要的组件放入'is'a你想要的组件。
<template>
<div>
<component :is="loadedComponent" v-if="loadedComponent !== null"/>
</div>
</template>
<script>
import exampleA from "./exampleA.vue";
import exampleB from "./exampleB.vue";
export default {
data(){
return {components:{'example-a':exampleA , 'example-b':exampleB }}
},
computed:{
loadedComponent(){
return this.components[this.$route.query.extension] ?? null;
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.