I've set up a simple Vue application within Rails, but I am encountering an issue:
hello_vue.js:
import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)
import CollectionSet from '../collection_set.vue'
document.addEventListener('turbolinks:load', () => {
const app = new Vue({
el: '#app',
components: { CollectionSet }
})
})
collection_set.vue:
<script>
import Collectable from './collectable.vue'
export default {
components: { Collectable }
}
</script>
<template>
<p>test</p>
<collectable />
</template>
collectable.vue:
<script>
export default {
name: 'collectable'
}
</script>
<template>
<p>test 2</p>
</template>
my webpage:
<div id="app"><collection-set /></div>
However, when I view my webpage with the setup above, I don't see anything displayed. Strangely, if I remove <collectable /> from collection_set.vue, then I can see the text "test". Interestingly, there are no errors being thrown.
Does anyone know why collectable is not rendering as expected?