vue-slickのエラーを解決したい

Question

以下のコンポーネントをインストールして、スライダーを実装しているのですが、サンプルの通りに記述したところ
https://github.com/staskjs/vue-slick

Uncaught ReferenceError: Vue is not defined

とエラーがでており

import Vue from 'vue';

を追記したところ

vue.esm.js?a026:610 [Vue warn]: Property or method "slickOptions" is not defined on the >instance but referenced during render. Make sure that this property is reactive, either >in the data option, or for class-based components, by initializing the property. See: >https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <SampleSwiper> at src/components/parts/Swiper.vue
<Top> at src/components/controller/top/Top.vue
<App> at src/App.vue
<Root>

とエラーが出ております。

何が足りないのでしょうか？

Answer 1

ソースコードがないのでなんとも言えないですが、エラーメッセージから判断するに

単一ファイルコンポーネント(vueファイル)でやってる感じなのでサンプルコードのコピペでは動きません
サンプルコードのnew Vue({は不要です(それ以下の部分が必要)

script部分で必要なのは

import Slick from 'vue-slick';

と

    components: { Slick },

    data() {
        return {
            slickOptions: {
                slidesToShow: 3,
                // Any other options that can be got from plugin documentation
            },
        };
    },

    // All slick methods can be used too, example here
    methods: {
        next() {
            this.$refs.slick.next();
        },

        prev() {
            this.$refs.slick.prev();
        },

        reInit() {
            // Helpful if you have to deal with v-for to update dynamic lists
            this.$nextTick(() => {
                this.$refs.slick.reSlick();
            });
        },

        // Events listeners
        handleAfterChange(event, slick, currentSlide) {
            console.log('handleAfterChange', event, slick, currentSlide);
        },
        handleBeforeChange(event, slick, currentSlide, nextSlide) {
            console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
        },
        handleBreakpoint(event, slick, breakpoint) {
            console.log('handleBreakpoint', event, slick, breakpoint);
        },
        handleDestroy(event, slick) {
            console.log('handleDestroy', event, slick);
        },
        handleEdge(event, slick, direction) {
            console.log('handleEdge', event, slick, direction);
        },
        handleInit(event, slick) {
            console.log('handleInit', event, slick);
        },
        handleReInit(event, slick) {
            console.log('handleReInit', event, slick);
        },
        handleSetPosition(event, slick) {
            console.log('handleSetPosition', event, slick);
        },
        handleSwipe(event, slick, direction) {
            console.log('handleSwipe', event, slick, direction);
        },
        handleLazyLoaded(event, slick, image, imageSource) {
            console.log('handleLazyLoaded', event, slick, image, imageSource);
        },
        handleLazeLoadError(event, slick, image, imageSource) {
            console.log('handleLazeLoadError', event, slick, image, imageSource);
        },
    },

かな

Comments

[ryu_t]

ご指摘の通り、「vueファイル」でした。エラーもなくなり、スライダーが表示されました。ありがとうございます。