Vue Js: Use directive in component with 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.

@gurghet Yes, I just created the directive directly in the component with Vue.directive('swiper', { bind: function () {.......... and imported the files also in the component. — SoldierCorp
– SoldierCorp, Commented May 25, 2016 at 15:27

tony19 · Accepted Answer · 2022-07-17 23:40:34Z

5

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).

edited Jul 17, 2022 at 23:40

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 13, 2017 at 7:28

胡亚雄

2,1891 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Js: Use directive in component with vue-loader

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related