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)`
Related
I made a Vue 2 web page and tried to use vue-router v3 to route to a different page. The web page is as follows:
src/App.vue: the web page opens from here
<template>
<div id="app">
<GoHere/>
</div>
</template>
<script>
import GoHere from './views/gohere/GoHere.vue'
export default {
name: 'App',
components: {
GoHere
}
}
</script>
src/main.js:
import Vue from 'vue'
import App from './App.vue'
import router from "./router/router"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src/views/gohere/GoHere.vue: the page from which the issue arises
<template>
<div>
<v-btn #click="goHere()">
Go Here
</v-btn>
</div>
</template>
<script>
export default {
name: "GoHere",
methods: {
goHere() {
this.$router.push("/menu")
}
}
}
</script>
src/views/menu/Menu.vue: the page to redirect to
<template>
<div>
Menu
</div>
</template>
<script>
export default {
name: "Menu",
}
</script>
src/router/router.js: the router file
import Vue from 'vue'
import VueRouter from 'vue-router'
import GoHere from '../views/gohere/GoHere'
import Menu from '../views/menu/Menu'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: "gohere", component: GoHere},
{ path: '/menu', name: "menu", component: Menu}
]
const router = new VueRouter({
routes
})
export default router
When I clicked on the button in GoHere.vue, the URL changes into "http://localhost:8080/#/menu" but the content does not change into the content for Menu.vue. How can the problem be solved?
The component from the current route will automatically render in <router-view></router-view>
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
Check the docs
I have create a test vue project using recurring components with single file components. I am getting an error that the component cmp2 is undefined even though it is defined in the file. Any help is welcome.
Here are the files:
-- main.js --
import Vue from 'vue'
import App from './App.vue'
new Vue({
name: 'main',
render: h => h(App)
}).$mount('#app')
-- App.vue --
<template>
<div id="app">
app
<cmp1 :show="true"/>
</div>
</template>
<script>
import cmp1 from './cmp1.vue'
export default {
name: 'app',
components: { cmp1 }
}
</script>
-- cmp1.vue --
<template>
<div>
in cmp1
<cmp2 v-if="show"/>
</div>
</template>
<script>
import cmp2 from './cmp2.vue'
export default {
name: 'cmp1',
props: ['show'],
components: {
cmp2
}
}
</script>
-- cmp2 --
<template>
<div>
in cmp2
<cmp1 />
</div>
</template>
<script>
import cmp1 from './cmp1.vue'
export default {
name: 'cmp2',
components: { cmp1 }
}
</script>
Now if I register the components in the main file, then everything works correctly:
-- main.js with registration --
import Vue from 'vue'
import App from './App.vue'
import cmp1 from './cmp1.vue'
import cmp2 from './cmp2.vue'
Vue.component('cmp1', cmp1)
Vue.component('cmp2', cmp2)
new Vue({
name: 'main',
render: h => h(App)
}).$mount('#app')
But I still don't understand why it would not work when I don't register the components globally. This has something to do with the recursive nature of the components but I don't know what I am doing wrong.
Thanks for the help !
That code is not correct ...
because you call a component in another component and that component call the first component you call and it cause the infinite loop to your app and there is no break point for that and vue stop that for happening because of that your code is not work properly...
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>
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.
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!