I've just set up a new Rails 6 app with Vue.js
Inside app/javascript/app.vue:
<template>
<div id="app">
<p>I am the App component</p>
<list></list>
</div>
</template>
<script>
import list from './list.vue'
export default {
name: 'App',
data: function () {
return {
message: "Hello Vue!"
}
},
components: {
list
}
}
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Now, in app/javascript/list.vue:
<template>
<div>
I am the List Component
</div>
</template>
<script>
export default {
name: 'list',
data: function () {
return {
posts: []
}
}
}
</script>
With regard to app/javascript/packs/hello_vue.js:
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
However, when I check in the browser, I encounter this error:
vue.runtime.esm.js:638 [Vue warn]: Unknown custom element: <list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at app/javascript/app.vue
<Root>
Why is the list component not being found? I've imported it successfully and given it a name.