CODEWITHSUNDEEP
vuejs2
Bas
Bas

Reputation: 2400

Vue Js multiple components into the app.vue

I have the following code and i am getting the following error: 

Failed to mount component: template or render function not defined.

I want to include top and bottom navigation to the app.vue How can i achieve that?

Main.js:

new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { 'App':App }
})

App.vue: 

<template>
    <div id="app">
        <navigationtop></navigationtop>
        <navigationbottom></navigationbottom>
        <router-view/>
    </div>
</template>
<script>
    import navigationtop from './components/navigation/top'
    import navigationbottom from './components/navigation/bottom'

    export default {
        name: 'app',
        components: {
            'navigationtop': navigationtop,
            'navigationbottom': navigationbottom
        }
    }......

Router:

export default new Router({
routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
 ]
 })

HelloWorld:

<template> </template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'}}}
</script>

enter image description here

Upvotes: 1

Views: 1090

Answers (1)

samayo
samayo

Reputation: 16495

Try to import your app like this:

import App from './foobar/App.vue'

and render it inside your Vue({}) object like:

new Vue({
   el: '#app',
   router,
   render: h => h(App)
})

Upvotes: 2

Related Questions