DEV Community

Cover image for Watch Props in Vue/Nuxt Composition API
Manthankumar Satani
Manthankumar Satani

Posted on

13 4

Watch Props in Vue/Nuxt Composition API

Watch dynamic props inside setup method in Nuxt3 or Vue3 CompositionAPI

<script lang="ts" setup>
import { defineProps, watch } from 'vue'

const prop = defineProps({
  value: { default: '', type: [String, Number] },
})

watch(
  () => prop.value,
  () => {
    console.log('prop value changed', prop.value)
  }
)
</script>

<template>
  <div>{{ value }}</div>
</template>

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
1doneazy profile image
Eazybright😊😊

Thanks for this. It was really helpful.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay