BootstrapVue Components Not Being Converted into HTML - vue.js

Question

My components are rendering to the client page exactly as written in BootstrapVue, so I'm seeing <b-button> literally rendered to the client page:
<b-button data-v-3d7e72245 id="myBtn" variant="outline-primary">Click Me</b-button>
Shouldn't this be converted into standard HTML during the Vue render process and have the bootstrap classes added automatically?
I'm new to Vue, so I could be missing something obvious - but I'm not seeing any errors when running 'npm run build' in the command line, or in the web console/Vue dev tools.
Header.vue:
<template>
<header id="Header">
<ApplyBtn btnText="Click Me" />
</header>
</template>
<script>
import ApplyBtn from './header/ApplyBtn.vue'
export default {
name: 'Header',
components: {
ApplyBtn
}
}
</script>
Main.js:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer'
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '/scss/global/duo-theme.scss'
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.config.devtools = true
Vue.config.productionTip = false
// Custom widgets
Vue.component('applybtn', require('./components/global/header/ApplyBtn.vue').default);
window.Vue = Vue;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Package.json:
{
"name": "VueBS",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"acorn": "^8.1.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-scss": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.10.0",
"css-loader": "^5.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"intersection-observer": "^0.12.0",
"jquery": "^1.12.4",
"mini-css-extract-plugin": "^0.9.0",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.7",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"typescript": "^4.2.3",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.3",
"vuetify": "^2.4.9"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-service": "^4.5.12",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"html-webpack-plugin": "^5.3.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0",
"webpack": "^4.46.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Answer 1

Try placing your Vue.use before you create your Vue instance.
Change this
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
To this
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App');