Блог

Я довольно новичок в NuxtJS, поэтому, пожалуйста, простите меня, если это вопрос новичка. Я настроил NuxtJS с помощью JavaScript, Tailwind и SSR. Итак, следующий код работает нормально, но я хочу импортировать Splide из пакета.

страницы/index.vue

 <template>
  <div id="image-slider" class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://splidejs.com/wp-content/uploads/2019/08/m03.jpg" />
        </li>
        <li class="splide__slide">
          <img src="https://splidejs.com/wp-content/uploads/2019/08/m04.jpg" />
        </li>
        <li class="splide__slide">
          <img src="https://splidejs.com/wp-content/uploads/2019/08/m05.jpg" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('DOMContentLoaded', function () {
      new Splide('#image-slider').mount();
    });
  },
  head() {
    return {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css' }
      ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js', defer: true, body: true }
      ]
    }
  }
}
</script>
 

Я попытался импортировать его с помощью этих шагов:
страницы/index.vue

 <script>
export default {
  mounted() {
    new Splide('#image-slider').mount();
  },
}
</script>
 

plugins/splide.js

 import Vue from 'vue';
import Splide from '@splidejs/splide';
Vue.use(Splide);
 

nuxt.config.js

 plugins: [
    { src: '~/plugins/splide', mode: 'client', ssr: false }
  ],
 

Но это выдает мне следующую ошибку в консоли моего браузера:

 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'function Vue (options) {
  if ( true amp;amp;
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}' is not a valid selector.
 

Пробуем разделитель vue:

plugins/splide.js

 import Vue from 'vue';
import { Splide, SplideSlide } from '@splidejs/vue-splide';
Vue.use(Splide);
Vue.use(SplideSlide);
 

Выдает мне эту ошибку:

 Could not find a declaration file for module '@splidejs/vue-splide'.
Try `npm i --save-dev @types/splidejs__vue-splide`