Configure MDBootstrap for Vue correctly.

Hello, I am trying to get MDBootstrap for Vue to work with, Vue. I followed the "Getting Started" page but when I use MDBV components I get an error.

I created a Vue app by using the following command:

vue init webpack md-bootstrap-vue

I installed MDBV by using this command found at the "Getting Started" page:

npm install --save mdbvue

I added the imports to my main.js file:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'bootstrap-css-only/css/bootstrap.min.css'; 
import 'mdbvue/build/css/mdb.css';
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

I went to the MDBV components page, picked a button and placed it in my App.vue file, just to test:

<template>
  <div id="app">
    <mdb-btn color="primary">Primary</mdb-btn>
  </div>
</template>

<script>
</script>

<style>
</style>

MDBV does not apply to the button, it is just text and the console gives me the following output:

[Vue warn]: Unknown custom element: <mdb-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

Now, I assume that I am missing some basic configuration for MDBV to work, but I cannot find it on the "Getting Started" page, or anywhere else.

What part of the setup am I missing?

Kind regards.