Vue Js：在带有 vue-loader 的组件中使用指令

Question

I'm using vue-loader and I'm facing a problem because I have created a directive in the main app.js to use in a component but is not possible to use that directive in the component.

I'm receiving this message:

vue.common.js?e881:1014 [Vue warn]: Failed to resolve directive: swiper (found in component: <testimonial-comp>)

app.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    components: { App },
    directives: {
        swiper:  {
            bind: function () {
                console.log('my directive');
          }
        }
    }
});

App.vue

<template lang="jade">
    testimonial-comp
</template>

<script>
    import TestimonialComp from './components/Testimonial.vue'

    export default {
        components: {
            TestimonialComp
        }
    }
</script>

<style lang="stylus" scoped>

</style>

Testimonial.vue

<template lang="jade">
  article#testimonial
    .swiper-container(v-swiper)
      .swiper-wrapper
        .swiper-slide Slide 1
        .swiper-slide Slide 2
        .swiper-slide Slide 3
      .swiper-pagination
      .swiper-button-prev
      .swiper-button-next
      .swiper-scrollbar

</template>

<script>
  import Swiper from 'Swiper/dist/js/swiper.min.js'

</script>
<style lang="stylus">

</style>

I hope you can help me.

Answer 1

I do not quite understand your code, but if u want to use directive in a component (*.vue file), I can show you how:

component/snippet.vue

<template>

    <div id="snippet">
        <code v-snippet>
            {{snippet.code}}
        </code>
    </div>

</template>


<script>

import snippet from '../directive/snippet';


export default {
    directives: {
        snippet: snippet
    }
}

</script>

directive/snippet.js

export default {

    update: function (el) {

        console.log('update');
    }
}

For further information, You can check https://v2.vuejs.org/v2/guide/custom-directive.html (the Intro part).