Vue Js multiple components into the app.vue

Question

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>

Could you include the code of the components being used at App component? The same for HelloWorld, It's possible that the problem is there. — dlopez
– dlopez, Commented Dec 6, 2017 at 8:20

samayo · Accepted Answer · 2017-12-06 09:39:25Z

2

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)
})

answered Dec 6, 2017 at 9:39

samayo

16.5k13 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bas Over a year ago

And how can i render the top and bottom navigation?

samayo Over a year ago

Vuejs is telling you that the error is coming from ` import navigationbottom from './components/navigation/bottom'` please share the contents of that file

Bas Over a year ago

Found it, i had <templat> instead of <template> uhumm sorry and many tnx! Works!

Collectives™ on Stack Overflow

Vue Js multiple components into the app.vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related