Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mya-ake/vue-slot-checker
Provide the function to check slot like checking props.
https://github.com/mya-ake/vue-slot-checker
Last synced: about 1 month ago
JSON representation
Provide the function to check slot like checking props.
- Host: GitHub
- URL: https://github.com/mya-ake/vue-slot-checker
- Owner: mya-ake
- License: mit
- Created: 2019-01-22T09:14:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:45:25.000Z (over 1 year ago)
- Last Synced: 2024-01-27T19:02:52.982Z (4 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-slot-checker
- Size: 2.37 MB
- Stars: 14
- Watchers: 3
- Forks: 1
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Utilities / Code Style)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Utilities / Code Style)
- awesome-vue - vue-slot-checker ★10 - Provide the function to check slot like checking props. (Utilities / Code Style)
- awesome-vue - vue-slot-checker - Provide the function to check slot like checking props. (Components & Libraries / Utilities)
README
# vue-slot-checker
[](https://badge.fury.io/js/vue-slot-checker)
[](https://opensource.org/licenses/MIT)
> vue-slot-checker provide functions like checking props.
```html
export default {
slots: ['default', 'header'], // require default slot and header slot
};
```
When using components that require default slot.
```HTML
```
It is output to the console as shown in the next image.
## Install
```bash
$ yarn add vue-slot-checker
```
[Plugin](#Plugin) or [Mixin](#Mixin).
### Plugin
Install plugin
```JavaScript
import Vue from 'vue';
import VueSlotChecker from 'vue-slot-checker';
Vue.use(VueSlotChecker);
```
### Mixin
Use with component
```HTML
import { vueSlotCheckerMixin } from 'vue-slot-checker';
export default {
mixins: [vueSlotCheckerMixin],
};
```
## Usage
`slots` option
- type: `Boolean | Array | Object`
### Boolean example
Require only default slot.
```js
export default {
slots: true,
};
```
### Array example
Require default slot and header slot.
```js
export default {
slots: ['default', 'header'],
};
```
### Object example
Require default slot.
header slot is require and only text.
```js
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)
- type: `Boolean`
- default: `Vue.config.silent (false)`
- https://vuejs.org/v2/api/#silent
Don't output to log.
e.g.
```JavaScript
import Vue from 'vue';
import VueSlotChecker from 'vue-slot-checker';
Vue.use(VueSlotChecker, {
silent: true,
});
```
## Example of switching in the environment
```JavaScript
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](https://github.com/mya-ake/vue-slot-checker/issues) or a [pull request](https://github.com/mya-ake/vue-slot-checker/pulls).
## License
[MIT](https://github.com/mya-ake/vue-slot-checker/blob/master/LICENSE)