Font awesome spinner not spinning - vue.js

Question

I have completed an installation of fontawesome in Nuxt with this fantastic link;
https://github.com/FortAwesome/vue-fontawesome
I have a spinner rendered as
<font-awesome-icon :icon="['fas','spinner']" />
The spinner does not spin, it is static.
I added fa-spin as
<font-awesome-icon :icon="['fas','spinner', 'spin']" />
This caused the error in the console Could not find one or more icon(s) undefined
Can anyone point me in the right direction, show me how to get my spinner spinning.
The relevant portion on the nuxt.config.js
modules: [
'nuxt-fontawesome'
],
//font-awesome
fontawesome: {
imports: [
{
set: '#fortawesome/free-solid-svg-icons',
icons: ['fas']
},
],
},
build: {
config.resolve.alias['#fortawesome/fontawesome-free-brands$'] = '#fortawesome/fontawesome-free-brands/shakable.es.js'
config.resolve.alias['#fortawesome/fontawesome-free-solid$'] = '#fortawesome/fontawesome-free-solid/shakable.es.js'
}
In the component("../pages/index.vue") it is;
<template>
<div>
<font-awesome-icon :icon="['fas','spinner','spin' ]" />
</div>
</template>
As suggested by #Steve, i have created a Glitch workspace
https://glitch.com/edit/#!/join/d57a5054-b448-4a53-ad37-d9465b0cef8b

Answer 1

You can add the spin directive.
<font-awesome-icon icon="spinner" spin />
Docs: https://github.com/FortAwesome/vue-fontawesome#basic

Answer 2

This works for me:
<template>
<div>
<font-awesome-icon icon="spinner" class="fa-spin" />
</div>
</template>
Font Awesome v.5, Vue.js v.2 (with #vue/cli 3)

Answer 3

Unless times have changed, Font Awesome does not provide out-of-the-box tools to animate their font and graphic libraries. They simply provide the service of offering single-colored, vector-graphic libraries formatted for various needs: true-type fonts (TTF), scalable vector graphics (SVG), etc.
You'll need to do the animation work yourself. Fortunately, it's very short work with CSS plus you'll get to control the speed of your spinner spinning.
/* Define an animation behavior */
#keyframes spinner {
to { transform: rotate(360deg); }
}
/* This is the class name given by the Font Awesome component when icon contains 'spinner' */
.fa-spinner {
/* Apply 'spinner' keyframes looping once every second (1s) */
animation: spinner 1s linear infinite;
}
I've updated the Glitch workspace you created (very helpful) with the additional CSS lines above to animate. Adjust accordingly and good luck!