I got problem with vuejs, please help me
I have main.js:
import App from './App.vue'
import routes from './app.router';
Vue.use(BootstrapVue);
new Vue({
el:'#app',
render: h => h(App),
created(){
},
router: routes,
methods:{
}
})
My file App.vue:
<template>
<div id="app" class="">
<menu-header> </menu-header>
<router-view> </router-view>
</div>
</template>
<script>
import menuHeader from './components/layout/menu-header.vue'; // error when i import this component
components:{
menuHeader
}
</script>
This is my menu-header.vue:
<template>
<ul>
<li>
Hello
</li>
</ul>
</template>
<script>
export default {
name: "menuHeader"
};
</script>
My problem is when i add menu-header component, my page give me error:
Cannot set property 'render' of undefined
But if I don't, it run normally. Please explain why and help me fix it.
Many thanks.
It looks like you are not exporting Vue component definition properly from App.vue file:
<template>
<div id="app" class="">
<menu-header> </menu-header>
<router-view> </router-view>
</div>
</template>
<script>
import MenuHeader from './components/layout/menu-header.vue'; // error when I import this component
// Code is missing export
export default {
components: {
MenuHeader
}
}
</script>
Related
ERROE 9:5 error 'Vue' is not defined no-undef
I added "import Vue from 'vue'" to the first line of the script. The error disappeared, but the message was not displayed.
Sorry for the rudimentary question.
views/About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
new Vue({
el: "#about",
data: {
message: "Hello Vue!",
},
});
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
<script>
export default {
data() {
return {
message: 'Hello !'
}
}
}
</script>
Just do like this.
From what I can see, you have already mounted your vue instance in your main.js, so there's no need to create another vue instance and mount it again in the About.vue file.
You only need the following lines of code in the About.vue file
In Vue 2
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: {
message: "Hello World!"
}
}
</script>
In Vue 3
In vue 3, the data property is now a method.
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello World!"
}
}
}
</script>
Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
template>
<v-app>
<Navbar/>
<div>
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</div>
</v-app>
</template>
<script>
import Navbar from '#/components/Navbar'
export default {
name: 'App',
components: {
Navbar
},
data: () => ({
//
}),
};
</script>
Navbar.vue (current)
<template>
<div>
<v-app-bar app flat color="">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>
<span>Sample App</span>
</v-toolbar-title>
</v-app-bar>
</div>
</template>
....
....
Navbar.vue (desired)
no template because I want to use render function
<script>
export default {
...
...
render(createElement){
const icon = createElement('v-app-bar-nav-icon')
return createElement('v-app-bar', [icon])
...
...
}
}
When I try this I get an errors:
vue.common.dev.js?4650:630 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any suggestions?
For future reference:
You simply have to import the vuetify components manually into the vue component.
Navbar.vue
<script>
import { VAppBar, VAppBarNavIcon } from "vuetify/lib";
export default {
render(createElement) {
const icon = createElement(VAppBarNavIcon)
return createElement(VAppBar, {}, [icon]);
},
};
</script>
More info at this link.
I am beginner vue. I use vue cli. Here is my code.
App.vue:
<template>
<div id="App">
<Count/>
</div>
</template>
<script>
import Count from './components/Count';
export default {
name:'App',
components:{
Count
}
};
</script>
Count.vue:
<template>
<div id="App">
<button #click="increase">{{count}}</button>
</div>
</template>
<script>
import {store} from './store/store.js';
export default {
name:'App',
computed:{
count(){
return store.state.count;
}
},
methods:{
increase(){
store.state.count++;
}
}
};
</script>
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
When I run serve, It compiled fail, say Module not found: Error: Can't resolve './store/store.js'.
I need someone to help me.
sorry. I find the error,It was due to my carelessness.I import component with error path.
I have a a component here in src/components/aboutUs.vue
<template>
<div>
<h1>This is a component test</h1>
</div>
</template>
And i have another vue file called Home.vue importing the component aboutUs.
<template>
<div class="home">
<div>HELLO !</div>
<aboutUs/>
</div>
</template>
<script>
import aboutUs from "#/components/aboutUs.vue";
export default {
name: "HomePage",
components: aboutUs
};
</script>
But my app.vue only renders "HELLO !" from Home.vue. and not the aboutUs component template. Help please.
You have to wrap your App components in {}. See docs
components: {
aboutUs
}
I tried to use a vue component(Global.vue) in other component(App.vue), but there
Failed to mount component: template or render function not defined
error.
Global.vue:
<template>
<div class="global-view">
<p>Global </p>
</div>
</template>
<script>
export default {
name: 'global'
}
</script>
App.vue:
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.component('global', require('./components/Global'))
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
You need to import the component within the component file that you want to use it in.
`import Global from './components/Global'
From there you need to add a new key inside your components option that will "register" the component.
Here is what you want your app component to look like.
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
import Global from './components/Global
export default {
name: 'app'
components: {
'global': Global,
}
}
</script>
<global></global> should be able to render at this point.
I use import instead of require(in main.js) and it works for me:
import Global from './components/Global.vue
Vue.component('global', Global)`