Regular NPM package not functioning within Vue.js app

Question

I'm trying to use NPM package scroll-ease-efficient in my Nuxt/Vue app, so I've created a file called scroll-ease-efficient.client.js in plugins/ folder that I specified in the plugins section of my nuxt.config.js file.

Here is the content of the file:

import Vue from 'vue'
import { scrollTo } from 'scroll-ease-efficient'
Vue.use(scrollTo)

Then in my app I simply do:

const scrollEle = document.getElementById('element')
scrollTo(scrollEle, 500)

This should work but it does nothing, and I have no console error either.

What's wrong?

Answer 1

thanks for asking. But first, let me clarify. Not all npm package is intended to be installed using Vue/Nuxt plugin method. The regular npm package name for this way often contains word vue/nuxt, like Vuetify or Vuefire.

And scroll-ease-efficient package isn't vue nor nuxt plugin. So in order to use this package, you can add global api from that package to vue or nuxt constructor.

import Vue from "vue";
import { scrollTo } from "scroll-ease-efficient";

Vue.prototype.$scrollTo = scrollTo;

Now you can access the global method through this.$scrollTo()

---

Edit

Please checkout this link for the demo: https://codesandbox.io/s/vue-scroll-ease-efficient-demo-8tqmj