Why don't my nested Vue template files render?

Question

I have three main Vue files:

index.vue.js:

<template>
  <div class="tax-map-wrapper">
    <h1>this is the page the map renders</h1>
    <Map/>
  </div>
</template>

<script>
  import Map from './components/Map.vue';
  export default {

  }
</script>

Map.vue:

<template>
  <div>
    <h1>MAP TESTER</h1>
  </div> 
</template>

<script>
  console.log("map")
  import Pagination from './Pagination.vue';
  import { debounce } from '../helpers/util.js'
  export default {

  }
</script>

<style scoped></style>

Map.vue:

<template>
  <div>
    <h1>MAP TESTER</h1>
  </div>
</template>

<script>
  console.log("pagination")
  export default {
  }
</script>

<style scoped></style>

When my app loads up, I can see the "this is the page the map renders" in my browser, meaning the index.vue file is fine, it's template content shows up on the bowser.

However, when the Map component never renders, and neither does the Pagination nested within the Map.vue template file. In my console, I can see the console logs for both "map" and "pagination", meaning those files are getting hit. However, the templates associated with those two files are not rendered. The borwser doesn't show any errors. It's just blank under the "this is the page the map page renders".

This is my tax_map.js:

import Vue from 'vue';
import Map from '../tax_map/index.vue';

Vue.use(Map)
document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#tax-map-wrapper',
    render: h => h(Map)
  })

})

This is my tax_map.html.erb:

<%= javascript_pack_tag 'tax_map' %>
<div id="tax-map-wrapper"></div>

Anyone know why the components within index.vue does not render? Any help is appreciated, thank you!

Answer 1

In index.vue.js your code makes use of the Map component ( consider changing this because it shadows Javascript Map object ); it doesn't register it though.

You can find documentation on local registration of components when using build systems like Webpack to write Vue apps.

In the module exports for index.vue , register Map as a component.

<script>
  import Map from './components/Map.vue';
  export default {
    components: {
      Map
    }
  }
</script>