I am creating website using node.js, express, pug, vue.js. I have one problem regarding Vue.js
app.js
window.Vue = require('vue');
Vue.component('work-list', require('../views/components/WorkList.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'Welcome'
}
});
WorkList.vue
<script>
export default {
name: 'WorkList',
data: function () {
return {
message: 'WorkList Page'
}
}
}
</script>
index.pug
(HTML Code..)
body
#app.container
h1 {{ message}}
.row
block content
a(href="/worklist") Go to worklist
script(src="bundle.js")
worklist.pug
extends index.pug
block content
work-list {{ message }}
When I try to access worklist page, browser is returning following error message.
How can I make WorkList in Root element?
This might also occur even when a <template></template>
is defined in your Vue single file component. In addition to require('/path/to/your/Component.vue')
as the second parameter to Vue.component()
when registering the component globally in your app.js, you also have to specify .default
:
Vue.component('work-list', require('../views/components/WorkList.vue').default);
^^^^^^^^
Your component file 'WorkList.vue' needs a template defined. The most straight forward way to construct a '.vue' component is with three sections.
<template>
//template code goes here.
</template>
<script>
// vue javascript here
</script>
<style>
// applicable styles here
</style>
Your component is expecting the <template>
markup.
There are other ways to define the template as well. https://v2.vuejs.org/v2/guide/render-function.html
When defining your component
Vue.component('my-component', {
template: `<div> markup here</div>`,
data(){
...
}
});
X-Templates (similar to above)
Vue.component('my-component', {
template: `#someElementId`,
....
//then in a separate component.js file
<script type="text/x-template" id="someElementId">
<div> markup here </div>
</script>
Using the render function
export default {
data() {
...
}
render(createElement) {
return createElement(
'div', {....}
....
Following on from Erich's answer , if you are using ES6 imports it would be:
import WorkList from '../views/components/WorkList'; // .vue is extension not required
Vue.component('work-list', WorkList);
In my case, I forgot to put my dynamic import inside an arrow function.
Wrong:
{
path: "/example/",
component: import("@/pages/Example"),
}
Correct:
{
path: "/example/",
component: () => import("@/pages/Example"),
}
I believe the problem is the alias for vue
in your webpack config.
Check out the different types of Vue builds .
Try using vue.min.js
or vue.common.js
//webpack.config.js
...
alias: {
'vue$': 'vue/dist/vue.common.js'
},
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.