BootstrapVue's component can't be read in some .vue file

Viewed 125

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

0 Answers
Related