Невозможно добавить директиву в качестве плагина в приложении Nuxt - PullRequest
Новая
       6

Невозможно добавить директиву в качестве плагина в приложении Nuxt

0 голосов
/ 02 октября 2019

Я пытаюсь включить пакет Ripple в мое приложение Nuxt.

После Nuxt docs и пакета пример документов У меня есть ripple.js файл в каталоге plugins/, содержащий это: 

import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)

Тогда в nuxt.config.js у меня есть: 

plugins: [
  '~/plugins/ripple.js'
],

Но теперь приложение вообще не работает, с некоторым Unexpected token export сообщением об ошибке на экране и сообщением об ошибке "Missing stack stack frames" в vm.js.

enter image description here

Я понятия не имею, что это значит, и что я делаю неправильно, какие-либо предложения?

1 Ответ

0 голосов
/ 04 октября 2019

Это связано с ошибкой SSR, когда директива vie-ripple не может использоваться на сервере. Чтобы обойти это, вам нужно указать Nuxt загружать плагин только на стороне клиента.

Чтобы исправить это, выполните следующие действия: 2 :

Сначала переименуйте ripple.js в ripple.client.js.

Во-вторых, обновите плагинымассив к следующему: 

plugins: [
  '~/plugins/ripple.client.js'
]

Постфикс .client сигнализирует nuxt только для запуска плагина на клиенте.

Дополнительную информацию можно найти здесь

Всегда помните об этом методе при добавлении плагинов Vue, особенно когда они каким-то образом взаимодействуют с DOM. Большинство, с которыми я сталкивался, требуют, чтобы этот метод функционировал без ошибок, поскольку DOM недоступен на сервере.

...