I'm making some Web Application using by Vue.js and TypeScript and I use BootstrapVue when I put html tags.
But, In my many components(.vue files), CoreQR.vue which is included by ReadQR.vue page failed to read BootstrapVue's components.
Below is Error Message.
Error traceback :
[Vue warn]: Unknown custom element: <b-form-file> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CoreQR> at src/components/CoreQR.vue
<ReadQR> at src/views/ReadQR.vue
<App> at src/App.vue
<Root>
CoreQR.vue :
<template>
<div>
<!-- <input type="file" accept="image/*" capture="camera"> -->
<b-form-file
v-model="file"
:state="Boolean(file)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class CoreQR extends Vue {
file=null;
}
</script>
ReadQR.vue :
<template>
<div>
<CoreQR></CoreQR>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import CoreQR from "../components/CoreQR"
@Component({
components:{
CoreQR,
}
})
export default class ReadQR extends Vue {}
</script>
main.ts :
import Vue from 'vue'
import {BootstrapVue,IconsPlugin} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.use(IconsPlugin);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
In conclusion, I wonder why BootstrapVue tags read from other vue files are not read from the "CoreQR.vue" file.
This is Path of files.
CoreQR.vue's Path : Root_of_Project/src/components/CoreQR.vue
ReadQR.vue's Path : Root_of_Project/src/views/ReadQR.vue
main.ts's Path : Root_of_Project/src/main.ts