How to integrate littlefoot.js with Vue.js (Nuxt.js)?

Question

littlefoot js is a "fancy" footnote replacement plugin. In the docs, its author says this is how it can be used with Gatsby:

import littlefoot from 'littlefoot'
import 'littlefoot/dist/littlefoot.css'

export function onRouteUpdate() {
  littlefoot() // Pass any littlefoot settings here.
}

I'm trying to do the same thing with a Nuxt.js app, but without success. As far as I know, this is one possible way to do it in a single component:

<script>
import littlefoot from 'littlefoot'

// ...

export default {
  // ...
  mounted() {
    littlefoot()
  }
}

</script>

But that isn't working, the web page simply refuses to load (infinite load) without any error message.

Answer 1

I always do either of the following:

1: Import module in nuxt.config.js

In cmd/terminal

npm install --save littlefoot 

in case you forgot

// nuxt.config.js
.
.
modules: [
  'littlefoot'
],
.
.

2 : Create a plugin in the /plugins/ directory

Create a file ~/plugins/littlefoot.js

import Vue from 'vue'
import littlefoot from 'littlefoot'

Vue.use(littlefoot)