After setting up a basic boilerplate project using vue cli create, I made some small modifications that initially seemed to work fine. However, at one point, both of my components suddenly stopped working in the browser without any warnings from vue-cli-service serve.
Upon checking the browser console, I encountered an error message stating "Unknown custom element" for both of my elements.
Below is my main.js file:
import './sass/style.scss'
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
/*
new Vue({
render: h => h(App)
}).$mount('#app')
*/
new Vue({
el: '#app',
template: '<App/>',
render: h => h(App),
components: { App }
}).$mount('#app');
Next, here is my App.vue file:
<template>
<div id="app">
<ShowList list_id="default"/>
</div>
</template>
<script>
import ShowList from './components/ShowList.vue'
export default {
name: 'app',
components: {
ShowList
}
}
</script>
<script lang="scss">
@import "sass/common.scss";
// Static footer
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height; /* Set the fixed height of the footer here */
margin-bottom:0;
}
.navbar {
margin-bottom:0;
}
</script>
Lastly, here is one of the components used:
<template>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your List</span>
</h4>
<ul class="list-group mb-3">
<li v-for="beer in beers" v-bind:key="beer.name" class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">{{ beer.name }}</h6>
<small class="text-muted">{{ beer.description }}</small>
</div>
<span class="text-muted">{{ beer.price }}</span>
</li>
</ul>
</div>
</div>
</template>
<!-- Include script with data for demonstration -->
<script>
var beer_items = [
{
name: 'Hoegarden',
price: '19:90 kr',
description: 'German beer'
},
{
name: 'Leffe',
price: '16:90 kr',
description: 'Belgian beer'
},
{
name: 'Fat Tire',
price: '17:50 kr',
description: 'American beer'
}
];
export default {
name: 'ShowList',
props: {
list_id: String
},
data () {
return {
beers: beer_items
};
}
}
</script>
<!-- Scoped styling specific to this component -->
<style lang="scss" scoped>
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: .5;
background: #C8EBFB;
}
.list-group {
min-height: 20px;
}
.list-group-item {
cursor: move;
}
.list-group-item i{
cursor: pointer;
}
</style>
I've also tried using hyphenated component names like show-list, but unfortunately, it did not resolve the issue. It seems like I might have overlooked something simple yet essential, as no one on Vue Gitter has been able to pinpoint the exact problem so far.