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

Answer 1

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.