CODEWITHSUNDEEP
vue.jsnuxt.js
drake035
drake035

Reputation: 2877

Regular NPM package not functioning within Vue.js app

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?

Upvotes: 3

Views: 101

Answers (1)

Jefry Dewangga
Jefry Dewangga

Reputation: 849

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

Upvotes: 3

Related Questions