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.

isebarn · Accepted Answer · 2019-10-10 09:15:27Z

0

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)

answered Oct 10, 2019 at 9:15

isebarn

3,9805 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zerohedge Over a year ago

@isebam - none of them above work. Even when including the plugin appraoch in nuxt.config.js plugins, and trying mode: "client".

isebarn Over a year ago

odd, try restarting npm run dev?

zerohedge Over a year ago

did that as well.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related