VueJS errors when using external components - vue.js

Question

Let me preface this by saying that I'm new to VueJS and I expect the solution to my problem is something trivial but I can't for the life of me figure it out or find it online so here I am :
I followed Traversy Media's crash course on VueJS and built the task tracker app alongside him and everything was working well. But after the course ended, I decided to play around with Data Tables in the About page, specifically, using tables that have column filtering. Two candidates came up : VueGoodTable and VueBootstrap4Table.
I know for a fact that VueGoodTable works because I had already used it before with Laravel without really understanding how any of it works, but when I tried to import it here, I kept getting this error :
Code:
<template>
<div class="about">
<h1>This is an about page</h1>
<vue-good-table
:columns="columns"
:rows="rows"/>
</div>
</template>
<script>
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
export default {
components: {
VueGoodTable,
},
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM do yy',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
],
};
},
}
</script>
This code is literally copy-pasted from the Get Started page of the VueGoodTable documentation.
A different error also happens when I try to use VueBootstrap4Table instead :
Code:
<template>
<div class="about">
<h1>This is an about page</h1>
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
data: function() {
return {
rows: [{
"id": 1,
"name": {
"first_name": "Vladimir",
"last_name": "Nitzsche"
},
"address": {
"country": "Mayotte"
},
"email": "franecki.anastasia#gmail.com",
},
{
"id": 2,
"name": {
"first_name": "Irwin",
"last_name": "Bayer"
},
"age": 23,
"address": {
"country": "Guernsey"
},
"email": "rlittle#macejkovic.biz",
},
{
"id": 3,
"name": {
"first_name": "Don",
"last_name": "Herman"
},
"address": {
"country": "Papua New Guinea"
},
"email": "delia.becker#cormier.com",
}],
columns: [{
label: "id",
name: "id",
filter: {
type: "simple",
placeholder: "id"
},
sort: true,
},
{
label: "First Name",
name: "name.first_name",
filter: {
type: "simple",
placeholder: "Enter first name"
},
sort: true,
},
{
label: "Email",
name: "email",
sort: true,
},
{
label: "Country",
name: "address.country",
filter: {
type: "simple",
placeholder: "Enter country"
},
}],
config: {
checkbox_rows: true,
rows_selectable: true,
card_title: "Vue Bootsrap 4 advanced table"
}
}
},
components: {
VueBootstrap4Table
}
}
</script>
I'm guessing that I'm not importing these components correctly somehow, so I would appreciate any help with this.
Thank you.

Answer 1

The unfortunate fact is that "not so recent" release of Vue v3 has bring some breaking changes from Vue 2 which require some migration
It is safe to say that very little of the existing components and component libraries created for Vue 2 work without any modification in Vue 3
The repo linked to the course shows that you are using Vue 3. But Both the vue-good-table or vue-bootstrap4-table are Vue 2 components and do not have a version for Vue 3 yet
So you need to look for different component and look for explicit support of Vue 3...