Custom directive in slot scope

Hey,

I'm currently trying to use a custom directive (from https://github.com/simplesmiler/vue-clickaway) in a scoped slot but I get "Failed to resolve directive". Is there any workaround around this?

// this is the MainNav component

import { mixin as clickaway } from 'vue-clickaway';

    export default {
        mixins: [clickaway],
        data() {
            return {
                isOpen : false,
            }
        },
        methods: {
            hide() {
                this.isOpen = false;
            }
        },
        render() {
            return this.$scopedSlots.default({
                isOpen      : this.isOpen,
                hide : this.hide,
            });
        },
    }

// and here I'm using it

<main-nav>
        <div slot-scope="slotScope">
            <nav class="mainnav" v-on-clickaway="slotScope.hide">
            </nav>
        </div>
    </main-nav>

rouge

6 years ago

Best Answer

Level 12

It doesn't work because you import the directive inside MainNav component so it won't be available from the scoped slot. You'll need to import it within the component where you use <main-nav> component. If you use it in an html or blade file, then you can import the directive on Vue root element.

import { directive as onClickaway } from 'vue-clickaway';

const app = new Vue({
    el: '#app',

    directives: {
        onClickaway
    }
});

ftiersch

6 years ago

Level 28

You're right, that worked. I thought it should work inside a renderless component too for reusability but that fixed it. Thanks!

madviks

5 years ago

Level 1

I am facing similar issue, however I do not have option to import directive on root level. Did you try/found any other method for this ?

Please or to participate in this conversation.