How to use props in <script setup> in vue3

Question

Just like the title says, related Links: New script setup (without ref sugar)

<template>
  <TopNavbar title="room" />
  <div>
    {{ no }}
  </div>
</template>

<script setup>
import TopNavbar from '@/layout/TopNavbar.vue'
import { defineProps, reactive } from 'vue'

defineProps({
  no: String
})

const state = reactive({
  room: {}
})

const init = async () => {
  // I want use props in this
  // const { data } = await getRoomByNo(props.no)
  // console.log(data);
}
init()

</script>

<style>
</style>

kissu · Accepted Answer · 2022-08-15 16:31:46Z

127

To use props with <script setup> you need to call defineProps() with the component prop options as the argument, this defines the props on the component instance and returns a reactive object with the props which you can use as follows:

<template>
  <TopNavbar title="room" />
  <div>
    {{ no }}
  </div>
</template>

<script setup>
import TopNavbar from "@/layout/TopNavbar.vue";
import { defineProps, reactive } from "vue";

const props = defineProps({
  no: String,
});

const { no } = toRefs(props);

const state = reactive({
  room: {},
});

const init = async () => {
  const { data } = await getRoomByNo(no.value);
  console.log(data);
};

init();
</script>

If you are using typescript the alternative way to do this is pass a type only declaration and infer the prop types from that. Pro's are that you'll get stricter type safety ~~but you cannot have default values.~~

<template>
  <TopNavbar title="room" />
  <div>
    {{ no }}
  </div>
</template>

<script setup>
import TopNavbar from "@/layout/TopNavbar.vue";
import { defineProps, reactive } from "vue";

const props = defineProps<{
  no: string,
}>();

const { no } = toRefs(props);

const state = reactive({
  room: {},
});

const init = async () => {
  const { data } = await getRoomByNo(no.value);
  console.log(data);
};

init();
</script>

EDIT

Defaults with type only props are now possible:

interface Props {
  msg?: string
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello'
})

edited Aug 15, 2022 at 16:31

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Mar 17, 2021 at 19:56

Richard

1,8453 gold badges13 silver badges21 bronze badges

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

2 Comments

Joachim Velzel Over a year ago

FYI: I also needed to import 'toRefs' from vue

Michal Levý Over a year ago

Note that toRefs is only needed if you want to destructure (or "split") props to pass a single prop to a composition function as ref for example. In other cases, just use props.propName directly

kissu · Accepted Answer · 2022-11-22 15:27:03Z

25

Very simple answer using features from Vue-3.1 and later:

`CircleImage.vue`

<template>
  <div class="px-4 w-8/12 sm:w-3/12">
    <img :src="src" :alt="alt" class="border-none rounded-full h-auto max-w-full align-middle" />
  </div>
</template>

<script setup>
const props = defineProps({
  src: String,
  alt: String,
})
</script>

`MyView.vue`

<template>
  <div class="flex flex-wrap justify-center">
    <CircleImage src="/file1.jpg" alt="one" />
    <CircleImage src="/file2.svg" alt="two" />
  </div>
</template>

<script setup>
import CircleImage from '@/components/CircleImage.vue'
</script>

See also the documentation: Declaring props or additional options

edited Nov 22, 2022 at 15:27

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Jul 16, 2021 at 9:15

oHo

55.1k30 gold badges175 silver badges210 bronze badges

1 Comment

kissu Over a year ago

I've edited your answer based on this question: stackoverflow.com/q/74534343/8816585 .view is probably a typo and should be .vue rather. Please correct me if it's wrong.

Molingran · Accepted Answer · 2021-02-26 08:32:54Z

8

I read "Newscript setup" and found the answer

first,use variable save defineProps

const props = defineProps({
  no: String
})

then use it

const init = async () => {
  console.log(props.no);
}

this is all code:

<template>
  <TopNavbar title="room" />
  <div>
    {{ no }}
  </div>
</template>

<script setup>
import TopNavbar from '@/layout/TopNavbar.vue'
import { defineProps, reactive, useContext } from 'vue'

const props = defineProps({
  no: String
})

const state = reactive({
  room: {}
})

const init = async () => {
  console.log(props.no);
}
init()

</script>

<style>
</style>

answered Feb 26, 2021 at 8:32

Molingran

1,2322 gold badges7 silver badges11 bronze badges

Comments

kissu · Accepted Answer · 2022-08-15 16:32:23Z

7

No need to call explicitly withDefaults

<script setup>
import { defineProps } from 'vue'

defineProps({
  isOpen: {
    type: Boolean,
    default: true
  }
})
</script>

edited Aug 15, 2022 at 16:32

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Dec 30, 2021 at 12:03

ctwhome

8541 gold badge16 silver badges28 bronze badges

2 Comments

kissu Over a year ago

Got any official reference for that one?

Abdul Basit Over a year ago

I was trying with withDefaults and my Props were not working. Thanks for your solution. 👍

kissu · Accepted Answer · 2022-08-15 16:32:34Z

4

Edit: This answer is outdated. The RFC was changed to use defineProps(..), which is auto-imported if using SFCs.

As per the ongoing RFC, the setup tag can have a string following where you can define which context you wish to have, like so:

<script setup="props, { emit }">
import { watchEffect } from 'vue';

watchEffect(() => console.log(props.msg));
emit('foo');
</script>

These are the same arguments that the setup() method receives.

edited Aug 15, 2022 at 16:32

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Mar 26, 2021 at 15:01

parker_codes

3,4151 gold badge21 silver badges27 bronze badges

1 Comment

Richard Over a year ago

That RFC is from a stale branch and was superseded: PR - github.com/vuejs/rfcs/pull/227 Rendered - github.com/vuejs/rfcs/blob/master/active-rfcs/…

novecentonove · Accepted Answer · 2022-12-06 20:41:54Z

2

if you need your props to be reactive you can get them in your child component like this:

const props = defineProps({
    no: String,
    myIdOfSomething: Number
})

const { no, myIdOfSomething } = toRefs(props);

console.log(no.value)
console.log(myIdOfSomething.value)

source https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

answered Dec 6, 2022 at 20:41

novecentonove

3895 silver badges14 bronze badges

Comments

Boussadjra Brahim · Accepted Answer · 2022-06-04 09:36:47Z

1

Using Typescript you could define your props in two syntaxes :

First syntax


<script setup lang="ts">
import {PropType} from 'vue'

const props=defineProps({
   color:{
      type:String as PropType<'primary'|'info'|'success'|'error'|'warning'>,
      default :'primary'
    }
})

</script>

Second syntax


<script setup lang="ts">

type Color='primary'|'info'|'success'|'error'|'warning'

const props=defineProps<{color:Color}>()

</script>

This syntax supports only :

A type literal
A reference to an interface or a type literal in the same file

answered Jun 4, 2022 at 9:36

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Muhammet ESER · Accepted Answer · 2024-04-16 09:20:41Z

0

If you're using Typescript and also want to add a default value, you can use this syntax.

<script setup lang="ts">

interface Props {
 disabled: boolean;
 loading: boolean;
 bordered: boolean;
 label?: string;
}

const props = withDefaults(defineProps<Props>(), {
 label: "Button Label",
}); 
</script>

edited Apr 16, 2024 at 9:20

answered Jul 24, 2022 at 10:44

Muhammet ESER

93 bronze badges

3 Comments

St. Jan Over a year ago

Is there a way to do this if your are not using Typescript?

zrooda Over a year ago

The code sample has the props inverted - label is required and can't have a default value, unlike disabled, loading and bordered that require it.

Muhammet ESER Over a year ago

That's correct. Thanks for you feedback. I'll update it.

Collectives™ on Stack Overflow

How to use props in <script setup> in vue3

8 Answers 8

EDIT

2 Comments

`CircleImage.vue`

`MyView.vue`

1 Comment

Comments

2 Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

EDIT

2 Comments

CircleImage.vue

MyView.vue

1 Comment

Comments

2 Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`CircleImage.vue`

`MyView.vue`