vue-styleguidist: Custom directives not resolved by vue

I’m documenting my component using the <docs> tag like this:

<docs>
```jsx
<div class="form-row">
    <kk-textarea label="Label title" sub-label="Label Sub-title" value="Awesome textarea!" />
</div>
```´
</docs>

The <kk-textarea> uses a custom directive “autoExpand”:

<textarea ref="textarea" :value="value" v-autoExpand:now @input="emit"></textarea>

I have also included custom css and js via the custom styleguide.config.js

require: [
    'babel-polyfill',
    path.join(__dirname, 'public/js/app.js'),
    path.join(__dirname, 'public/css/app.css')
],

When I open the styleguide, I get the following error

[Vue warn]: Failed to resolve directive: autoExpand

Are custom directives not included?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

@rafaesc it would be nice to update the doc as well 😃

0m4r on Jun 19, 2018

@0m4r @BlitZz96 Ok, I’ve published the fix under v1.7.9. Please try it and let me know if it works.

rafaesc on Jun 18, 2018

Hi @BlitZz96,

There isn’t any option in the config to pass in custom directives that will be registered on the Vue instance. However, it’s possible to register these locally in the component.

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

Sound1ab on May 2, 2018