Обычный пакет NPM не работает в приложении Vue.js

Question

Я пытаюсь использовать пакет NPM scroll-easy -ffective в своем приложении Nuxt / Vue, поэтому я создал файл с именем scroll-ease-efficient.client.js в папке plugins/, которыйЯ указал в разделе plugins моего nuxt.config.js файла.

Вот содержимое файла:

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

Тогда в моем приложении я просто делаю:

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

Это должно работать, но ничего не происходит, и у меня также нет ошибки консоли.

Что не так?

Answer 1

спасибо за вопрос. Но сначала позвольте мне уточнить. Не все пакеты npm предназначены для установки с использованием метода плагина Vue / Nuxt. Обычное имя пакета npm для этого способа часто содержит слово vue / nuxt, например Vuetify или Vuefire.

И scroll-ease-efficient package не является ни vue, ни плагином nuxt. Таким образом, чтобы использовать этот пакет, вы можете добавить глобальный API из этого пакета в конструктор vue или nuxt.

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

Vue.prototype.$scrollTo = scrollTo;

Теперь вы можете получить доступ к глобальному методу через this.$scrollTo()

---

Редактировать

Пожалуйста, проверьте эту ссылку для демонстрации: https://codesandbox.io/s/vue-scroll-ease-efficient-demo-8tqmj