Vue 3 how to pass an optional boolean prop?

Question

I'm building an app with Vue 3 and TS 4.4 and bundled with Vite 2. I've got a LoginPage.vue file with these contents:

<script lang="ts" setup>
const props = defineProps<{
  message?: string;
  redirectOnSubmit?: boolean;
  showRegisterLink?: boolean;
}>();

console.log({ ...props });
</script>

<template>
  ... login form and whatnot
</template>

This component is being passed to vue-router

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { name: RouteName.LOGIN, path: "/login", component: LoginPage },
    { name: RouteName.REGISTER, path: "/register", component: RegisterPage },
  ],
});

The problem I'm having is when the login page setup script gets run, it logs this:

{ redirectOnSubmit: false, showRegisterLink: false, message: undefined }

Why are my optional boolean props being forced to false instead of undefined? Is there any way to turn this off? If I switch message to message?: boolean, it also gets switched to false.

I'd like to default these props to true if nothing is passed, but as-is there's no way for me to distinguish between passing false and omitting the props entirely.

@Batuhan That's the LoginPage.vue component. It's passed directly to vue-router, so it's not being passed any props. That's the problem. Vue is acting like the LoginPage component is receiving redirect-on-submit="false" but really I'm not passing any props to it. — SimpleJ
– SimpleJ, Commented Oct 26, 2021 at 20:30

tony19 · Accepted Answer · 2022-04-12 16:54:09Z

18

Vue defaults Boolean props to false if no default was specified in the prop declaration. The author of Vue explains the reasoning:

The boolean casting follows the same rule of a boolean attribute: presence of any value are casted to true, absence means false.

To default the props to true, declare the prop with a default option of true, using the object-based syntax for the prop declaration, as seen in this Options API example:

<script>
export default {
  props: {
    myOptionalBool: {
      type: Boolean,
      default: true, 👈
    }
  }
}
</script>

Option 1: `defineProps(props)`

In <script setup>, defineProps() accepts the prop declaration object (shown above) as a function argument. Since defineProps() only accepts either the function argument or the generic type argument, all props would have to be declared in the function argument:

<script lang="ts" setup>
const props = defineProps({
  message: String,
  showRegisterLink: {
    type: Boolean,
    default: true,
  },
  redirectOnSubmit: {
    type: Boolean,
    default: true,
  },
})
</script>

demo 1

Option 2: `withDefaults()` and `defineProps<T>()`

The withDefaults() macro can be used with defineProps<T>() to specify default values for specific props:

<script lang="ts" setup>
interface Props {
  message?: string
  redirectOnSubmit?: boolean
  showRegisterLink?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  redirectOnSubmit: true,
  showRegisterLink: true,
})
</script>

demo 2

edited Apr 12, 2022 at 16:54

answered Oct 27, 2021 at 6:35

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Dean Over a year ago

How Vue treats boolean props is still a weird part of Vue's API, and is inconsistent with HTML, JS, TS, and Vue itself. See: github.com/vuejs/vue/issues/4792#issuecomment-1591765678

Dico Didiraja Over a year ago

thank you so much, why tf is so hard to find this explanation in vue docs ????

Markus · Accepted Answer · 2023-09-08 09:24:44Z

7

To answer the question more explicitly:

You must use withDefaults and explicitly pass undefined as the default:

const props = withDefaults(defineProps<{
  message?: string;
  redirectOnSubmit?: boolean;
  showRegisterLink?: boolean;
}>(), {
  redirectOnSubmit: undefined,
  showRegisterLink: undefined
})

This forces the optional boolean attributes to be undefined instead of false when not passed.

answered Sep 8, 2023 at 9:24

Markus

5,8276 gold badges51 silver badges65 bronze badges

Collectives™ on Stack Overflow

Vue 3 how to pass an optional boolean prop?

2 Answers 2

Option 1: `defineProps(props)`

Option 2: `withDefaults()` and `defineProps<T>()`

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1: defineProps(props)

Option 2: withDefaults() and defineProps<T>()

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Option 1: `defineProps(props)`

Option 2: `withDefaults()` and `defineProps<T>()`