Nuxtjs: Adding Vuejs plugins doesn't get initialized/ shown on my template

I am trying to add a vue-button-loading plugin to my project. I've installed the plugin properly and added the necessary configurations as instructed on nuxtjs on how to install the plugin.

Here is where I installed my plugin on nuxt.config.js file:

export default {
  ...
  plugins: [
      {
        src:'~/plugins/loading-button.js', mode: 'client'
      }
  ]
  ...
 }

And then I created loading-button.js under the plugins folder as follows:

import Vue from 'vue'
import VueLoadingButton from 'vue-loading-button'

Vue.use(VueLoadingButton)

Lastly, I load my button on the template with:

<VueLoadingButton />

But nothing seems to show. If I inspect I can see it is initialized.

Any help to resolve this will be greatly appreciated.

try use vue.component instead

import Vue from 'vue'
import VueLoadingButton from 'vue-loading-button'

Vue.component('my-loading-button', VueLoadingButton)

and in your vue template

<my-loading-button :loading="true">Send</my-loading-button> 

You can check live here https://codesandbox.io/s/practical-bartik-43e37?file=/plugins/loading-button.js