{"id":16971650,"url":"https://github.com/daveberning/vue-render-if","last_synced_at":"2026-04-24T16:32:11.077Z","repository":{"id":35572629,"uuid":"159864559","full_name":"daveberning/vue-render-if","owner":"daveberning","description":"Render Vue slots if properties are not undefined, null, empty strings, or a custom value. This helps avoid long and confusing v-ifs just to check if a property is valid.","archived":false,"fork":false,"pushed_at":"2022-12-10T02:03:17.000Z","size":1155,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T09:08:34.258Z","etag":null,"topics":["conditional-rendering","es6","javascript","props","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daveberning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-30T18:40:57.000Z","updated_at":"2019-07-15T19:11:35.000Z","dependencies_parsed_at":"2022-08-26T15:54:51.414Z","dependency_job_id":null,"html_url":"https://github.com/daveberning/vue-render-if","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fvue-render-if","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fvue-render-if/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fvue-render-if/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fvue-render-if/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daveberning","download_url":"https://codeload.github.com/daveberning/vue-render-if/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369931,"owners_count":20927927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conditional-rendering","es6","javascript","props","vue"],"created_at":"2024-10-14T00:53:22.056Z","updated_at":"2026-04-24T16:32:06.054Z","avatar_url":"https://github.com/daveberning.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-render-if\n\nThe `vue-render-if` component makes checking against data in your template, easy. This component helps clean up your Vue `template` when checking for multiple \"falsey\" values of different types.\n\n__Before__\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv v-if=\"value1 !== '' \u0026\u0026 value1 !== undefined \u0026\u0026 value1 !== null \u0026\u0026 value2 !== undefined \u0026\u0026 value2 !== null \u0026\u0026 value3 !== undefined \u0026\u0026 value3 !== null\"\u003e\n    \u003cp\u003eI should only render if every value is not undefined, null, or an empty string.\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      value1: 'Vue.js',\n      value2: true,\n      value3: 2018\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n__After__\n\n```html\n\u003ctemplate\u003e\n  \u003crender-if :defined=\"[value1, value, value3]\"\u003e\n    \u003cp\u003eI should only render if every value is not undefined, null, or an empty string.\u003c/p\u003e\n  \u003c/render-if\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport RenderIf from 'vue-render-if';\n\nexport default {\n  components: {\n    RenderIf,\n  },\n  data() {\n    return {\n      value1: 'Vue.js',\n      value2: true,\n      value3: 2018\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nBy default, `vue-render-if` will render a `div` and will check if the values passed in the `defined` props array is either `undefined`, `null`, or an empty string `''`. You can however, define your own invalid values.\n\n__Note:__ You can also pass in a single value if you are checking against one data or state property.\n\n```html\n\u003ctemplate\u003e\n  \u003crender-if :defined=\"value1\"\u003e\n    \u003cp\u003eI should only render if every value is not undefined, null, or an empty string.\u003c/p\u003e\n  \u003c/render-if\u003e\n\u003c/template\u003e\n```\n\n## Options\n\n`vue-render-if` accepts three `props`, one of which is required (`defined`). The other two props are `tag` and `not-valid`.\n\n| Prop Name | Required | Default Value | Accepts                             | Purpose                                                                                  |\n|-----------|----------|---------------|-------------------------------------|------------------------------------------------------------------------------------------|\n| defined   | yes      | N/A           | Array (all types) or a single value | List all of the data items that should have a value of some kind for the slot to render. |\n| tag       | no       | 'div'         | String                              | Defines the HTML tag `render-if` should render as.                                       |\n| not-valid | no       | N/A           | Array (all types) or a single value | Defines all of the property values that should be considered invalid.                    |\n\n\n```html\n\u003ctemplate\u003e\n  \u003crender-if :defined=\"value1\" tag=\"section\" :not-valid=\"['foo, bar', undefined, null, '']\"\u003e\n    \u003cp\u003eI should only render if every value is not undefined, null, or an empty string.\u003c/p\u003e\n  \u003c/render-if\u003e\n\u003c/template\u003e\n```\n\nThis instance will...\n- Render if `value1` is not `'foo'`, `'bar'`, `undefined`, `null, or empty.\n- Render a `section` tag.\n\n__Note:__ If you defined values for the `not-valid` prop, you will need to add `undefined`, `null`, and `''` if you still want those to be falsy.\n\n## Usage\n\n```bash\n$ yarn add vue-render-if\n# or\nnpm install --save vue-render-if\n```\n\n### Add it Globally\n\n__main.ts__\n```javascript\nimport RenderIf from 'vue-render-if';\n\nVue.component('render-if', RenderIf);\n```\n\n### Using it in a Vue Component\n```html\n\u003cscript\u003e\nimport RenderIf from 'vue-render-if';\n\nexport default {\n  components: {\n    RenderIf\n  }\n}\n\u003c/script\u003e\n```\n\n## Contributing\n1. Fork it!\n2. Create your feature branch: git checkout -b my-new-feature\n3. Commit your changes: git commit -am 'Add some feature'\n4. Push to the branch: git push origin my-new-feature\n5. Submit a pull request!\n\n## Author\n\n__vue-render-if__ © Dave Berning, Released under the MIT License.\n\n[daveberning.io](https://daveberning.io) - [GitHub](https://github.com/daveberning) - [Twitter](https://twitter.com/daveberning)\n\nSpecial thanks to Cory Kleiser, Lance Deters, and Craig Mullin.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaveberning%2Fvue-render-if","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaveberning%2Fvue-render-if","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaveberning%2Fvue-render-if/lists"}