How to render multiple vue single file components on a page

Question

I am new to Vue and I am trying a couple of basic examples to understand the framework. I have created 2 single file components navigation.vue and pageoptions.vue. I have imported them in the main.js file and I am able to successfully compile and run the application. However though I have both the components in the index.html (inside "app") only 1 component is rendered, i.e. the 1 that I pass to the render function. Since the render function cannot return multiple elements, how do I get any other component render on the page without clubbing these 2 components in 1 parent component? If this is not supported, then what is the way to address this scenario? Where am I wrong?

Component 1 - navigation.vue

<template>
    <div>Navigation Menu</div>
</template>

<script>
    export default {
        name: 'navigation',
        data () {
            return {
            }
        }
    }
</script>

Component 2 - pageoptions.vue

<template>
    <div>Page Options</div>
</template>

<script>
    export default {
        name: 'pageoptions',
        data () {
            return {
            }
        }
    }
</script>

main.js file

import Vue from 'vue'
import navigation from './components/navigation.vue'
import pageoptions from './components/pageoptions.vue'

new Vue({
    el: '#app',
    render: (element => element(navigation)),//this will render only navigation component. How to render pageoptions too in this call?
    components: {navigation,pageoptions}
})

index.html

<!--html, head, body etc-->
<div id="app">
    <div style="background-color:teal;">
        <navigation></navigation>
    </div>

    <div style="background-color:silver">
        <pageoptions></pageoptions>
    </div>
</div>
<!--html, head, body etc-->

Output in browser

Navigation Menu

Can you share your App.vue file please? – Andres Foronda Jun 07 '20 at 07:36 — Andres Foronda, Jun 07 '20 at 07:36

score 1 · Accepted Answer · answered Jun 07 '20 at 07:49

This is not the way to render the components, first, the index.html file has the div with the id app to serve as entry point of the app, I mean, here is the point where your application will be mounted.

<!--html, head, body etc-->
<div id="app">
</div>
<!--html, head, body etc-->

This way is just fine.

Now we need a base component, the default example has the App.vue file, so in the main.js we have:

// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>',
  render: h => h(App)
});

Now in the App.vue component you can use your components:

// App.vue
<template>
  <div>
    <div style="background-color:teal;">
      <navigation></navigation>
    </div>

    <div style="background-color:silver">
      <page-options></page-options>
    </div>
  </div>
</template>
<script>
import Navigation from './components/navigation.vue'
import PageOptions from './components/pageoptions.vue'
export default {
  components: {
    Navigation,
    PageOptions,
  }
}
</script>

And it's done.

You can use the index.html file to import libraries (the ones that can't be installed with npm), but try to don't use it to add functionality, your components must be inside the src folder, you can use any folder structure, but remember that there is only one mount point of your app.

Oh you are right!, @Amod you can remove the line, anyway both will work — Andres Foronda, Jun 07 '20 at 07:57
Thank you @AndresForonda. Works perfectly now. " but remember that there is only one mount point of your app " - helped clear the confusion. — AVV, Jun 07 '20 at 08:10

score 0 · Answer 2 · answered Jun 07 '20 at 11:13

You have to render the main element of the main App component. it usually goes with an id of #app but vue application template and format are automatically generated when you create a vue app , So I think you know these stuff. I think you need to understand how a vue app works. I'm somewhat a newbie myself but from what I know ,You render anything within the main element of your main app, And the different views are nested in there , And different components will be nested within the views. So at all times you are rendering your main el (usually with the id of #app) and within that it's changing the components that are shown on top of it. For example , You have a component of People , And components of PeopleList And SideBar . You want to have a tab about people which inside that tab(our People component) , Contains a list of people and a sidebar; Here you render the People component in the App component Within the main element, And inside the People component you will have the PeopleList and SideBar nested. Hope it helps.

Got it. Also as in the answer, i had not thought of putting everything in 1 base component. Thank You :) — AVV, Jun 07 '20 at 13:39

How to render multiple vue single file components on a page

2 Answers2