f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
105 lines
3.4 KiB
Markdown
105 lines
3.4 KiB
Markdown
---
|
|
title: Boolean Prop Type Order Affects Casting Behavior
|
|
impact: MEDIUM
|
|
impactDescription: Wrong type order causes boolean props to be parsed as empty strings instead of true
|
|
type: gotcha
|
|
tags: [vue3, props, boolean, type-casting, validation]
|
|
---
|
|
|
|
# Boolean Prop Type Order Affects Casting Behavior
|
|
|
|
**Impact: MEDIUM** - When a prop accepts multiple types including both `Boolean` and `String`, the order in the type array determines how attribute-only syntax (e.g., `<Component disabled />`) is parsed. Incorrect ordering can result in `""` (empty string) instead of `true`.
|
|
|
|
Vue applies special boolean casting rules, but String appearing before Boolean disables this casting.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] Place `Boolean` before `String` in type arrays when you want boolean casting
|
|
- [ ] Test attribute-only syntax (`<Component disabled />`) to verify expected behavior
|
|
- [ ] Consider using only `Boolean` type if the prop is truly boolean
|
|
- [ ] Document the expected usage if both String and Boolean are intentional
|
|
|
|
**Incorrect:**
|
|
```vue
|
|
<script setup>
|
|
// WRONG: String before Boolean disables boolean casting
|
|
defineProps({
|
|
disabled: [String, Boolean] // disabled="" is parsed as empty string ""
|
|
})
|
|
</script>
|
|
|
|
<!-- In parent template -->
|
|
<MyComponent disabled /> <!-- props.disabled === "" (empty string, not true!) -->
|
|
```
|
|
|
|
```vue
|
|
<script setup>
|
|
defineProps({
|
|
// PROBLEMATIC: Order matters and may cause confusion
|
|
loading: [String, Boolean], // <Component loading /> gives ""
|
|
active: [Boolean, String] // <Component active /> gives true
|
|
})
|
|
</script>
|
|
```
|
|
|
|
**Correct:**
|
|
```vue
|
|
<script setup>
|
|
// CORRECT: Boolean before String enables boolean casting
|
|
defineProps({
|
|
disabled: [Boolean, String] // <Component disabled /> parsed as true
|
|
})
|
|
</script>
|
|
|
|
<!-- All of these work as expected -->
|
|
<MyComponent disabled /> <!-- props.disabled === true -->
|
|
<MyComponent :disabled="true" /> <!-- props.disabled === true -->
|
|
<MyComponent :disabled="false" /> <!-- props.disabled === false -->
|
|
<MyComponent disabled="custom" /> <!-- props.disabled === "custom" -->
|
|
```
|
|
|
|
```vue
|
|
<script setup>
|
|
// BEST: Use only Boolean if you don't need String values
|
|
defineProps({
|
|
disabled: Boolean // Clear intent, no ambiguity
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## Boolean Casting Rules
|
|
|
|
| Prop Declaration | Template Usage | Resulting Value |
|
|
|-----------------|----------------|-----------------|
|
|
| `Boolean` | `<C disabled />` | `true` |
|
|
| `Boolean` | `<C />` (absent) | `false` |
|
|
| `[Boolean, String]` | `<C disabled />` | `true` |
|
|
| `[String, Boolean]` | `<C disabled />` | `""` (empty string) |
|
|
| `[Boolean, Number]` | `<C disabled />` | `true` |
|
|
| `[Number, Boolean]` | `<C disabled />` | `true` |
|
|
|
|
Note: The String type is special - it's the only type that overrides Boolean casting when placed first.
|
|
|
|
## When to Use Multiple Types
|
|
|
|
```vue
|
|
<script setup>
|
|
// Use case: Prop can be a boolean toggle OR a string configuration
|
|
defineProps({
|
|
// Animation can be true/false OR a timing string like "fast", "slow"
|
|
animate: {
|
|
type: [Boolean, String], // Boolean first for casting
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!-- Usage examples -->
|
|
<Dialog animate /> <!-- true - use default animation -->
|
|
<Dialog :animate="false" /> <!-- false - no animation -->
|
|
<Dialog animate="slow" /> <!-- "slow" - custom timing -->
|
|
```
|
|
|
|
## Reference
|
|
- [Vue.js Props - Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting)
|