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?

I should add that Vue plugins used with Vue.use() have to subscribe to a specific interface: it should have an install method that takes two arguments: vuejs.org/v2/guide/plugins.html#Writing-a-Plugin. Objects that do not meet this requirement cannot be used as a plugin. — Jasmonate
– Jasmonate, Commented Oct 23, 2019 at 6:59
pls consider it to behave as expected - scrollTo(undefined) just does nothing: github.com/TheoXiong/scroll-ease-efficient/blob/… — Estradiaz
– Estradiaz, Commented Oct 26, 2019 at 11:08
But my element does get selected and scrollEle is correctly defined — drake035
– drake035, Commented Oct 26, 2019 at 19:42

Jefry Dewangga · Accepted Answer · 2019-10-23 06:55:30Z

3

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

edited Oct 23, 2019 at 6:55

answered Oct 20, 2019 at 4:30

Jefry Dewangga

8491 gold badge11 silver badges24 bronze badges

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

5 Comments

drake035 Over a year ago

Thanks, still doesn't do anything though

Jefry Dewangga Over a year ago

@drake035 Hi I made a demo, please check out the link on the edited section above.

drake035 Over a year ago

My question relates to a Nuxt/Vue app not just a regular Vue app. I know it's not specified in the title but it is in the first line of the question

Jefry Dewangga Over a year ago

I think the problem here is not on the vue or nuxt app itself, but on the documentation of the scroll-ease-efficient. At first, I also had hard time figure out how to make it worked on my demo links. Then I decided to just copy and paste the code of their demo to my demo.

drake035 Over a year ago

Thanks but that doesn't answer the question

Collectives™ on Stack Overflow

Regular NPM package not functioning within Vue.js app

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related