Never Play Matchmaker

    vue-slot-checker
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.7 • Public • Published

    vue-slot-checker

    npm version License: MIT

    vue-slot-checker provide functions like checking props.

    <template>
      <div>
        <header><slot name="header" /></header>
        <div><slot /></div>
      </div>
    </template>
     
    <script>
    export default {
      slots: ['default', 'header'], // require default slot and header slot
    };
    </script> 

    When using components that require default slot.

    <template>
      <div>
        <SampleComponent />
      </div>
    </template>

    It is output to the console as shown in the next image.

    Outputting to the console

    Install

    $ yarn add vue-slot-checker

    Plugin or Mixin.

    Plugin

    Install plugin

    import Vue from 'vue';
    import VueSlotChecker from 'vue-slot-checker';
     
    Vue.use(VueSlotChecker);

    Mixin

    Use with component

    <script>
    import { vueSlotCheckerMixin } from 'vue-slot-checker';
     
    export default {
      mixins: [vueSlotCheckerMixin],
    };
    </script>

    Usage

    slots option

    • type: Boolean | Array | Object

    Boolean example

    Require only default slot.

    export default {
      slots: true,
    };

    Array example

    Require default slot and header slot.

    export default {
      slots: ['default', 'header'],
    };

    Object example

    Require default slot. header slot is require and only text.

    export default {
      slots: {
        default: {
          required: true,
        },
        header: {
          validator(slot) {
            if (typeof slot === 'undefined') {
              return false;
            }
            return typeof slot[0].tag === 'undefined' && typeof slot[0].text === 'string';
          },
        },
      },
    };

    Options

    silent (option)

    Don't output to log.

    e.g.

    import Vue from 'vue';
    import VueSlotChecker from 'vue-slot-checker';
     
    Vue.use(VueSlotChecker, {
      silent: true,
    });

    Example of switching in the environment

    import Vue from 'vue';
    import VueSlotChecker from 'vue-slot-checker';
     
    // When not used as a plugin
    if (process.env.NODE_ENV === 'development') {
      Vue.use(VueSlotChecker);
    }
     
    // When using the silent option
    Vue.use(VueSlotChecker, {
      silent: process.env.NODE_ENV !== 'development'
    });
     
    // When using the Vue.config.silent
    Vue.config.silent = process.env.NODE_ENV !== 'development';
    Vue.use(VueSlotChecker);

    Contribution

    If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

    License

    MIT

    Keywords

    Install

    npm i vue-slot-checker

    DownloadsWeekly Downloads

    0

    Version

    0.2.7

    License

    MIT

    Unpacked Size

    897 kB

    Total Files

    19

    Last publish

    Collaborators

    • mya-ake