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>
Related
I'm using vue cli to build a Spa. It is just a basic vue router code. After installing and using vue router, it is not displaying anything on my app.vue file.
I tried to inspect from console, but there is just a commented line, nothing else.
Here is the code
main.js File
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {route} from './router'
Vue.use(VueRouter);
const router = new VueRouter({
route: route
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
router.js file
import Home from './component/home'
import User from './component/user'
export const route = [
{path:'/', component: Home},
{path:'/user', component:User}
]
app.js file
<template>
<div id="app">
<h1>This is main app</h1>
<router-link to="/user">User</router-link>
<router-link to="/">Home</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
user.vue file
<template>
<div>
<h1>This is User page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
home.vue file
<template>
<div>
<h1>This is home page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
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.
Using Vue.js I have this in my /Component/App.vue
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
name: 'app',
data () {
return {
}
}
<template>
<div id="appp">
<div id="chart-container">
</div>
</div>
</template>
In my js/examplevue.js Script I have
Vue.component('Chart', require('./components/App.vue'));
var app = new Vue({
el: '#app',
});
Then in my balde i have :
<div class=" " id="app">
<Chart>.</Chart>
</div>
<script src="{{ asset('js/examplevue.js') }}"></script>
I catch the error : Require is not defined. in Exemple.js
Usually, my vuejs code is working until i try to integer a component.
It looks like your App.vue file is malformed and there are two other errors:
in your template, the div id is mispelled as "appp" instead of "app" as defined in your examplevue.js file
I also noticed you were missing a closing } on your export default statement
If you want to use a <template> tag section you must also enclose all of your Javascript in <script> tags (see code below). :
/Component/App.vue
<template>
<div id="app">
<div id="chart-container">
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
name: 'app',
data () {
return {}
}
}
</script>
you may also have to put the following code in your examplevue.js file
import Vue from 'vue';
in order to create a new Vue instance.
Hope that helps!
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>
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)`