How do I get refs and computed vars to show up in Vue Devtools when using the Composition API and the Script Setup syntax?
I have a number of variables in one of my components that would go in the data() function or computed: {} section when using Vue's Options API (which I'm more familiar with), but this component is using the Composition API and the <script setup> syntax, and I'm not seeing the variables show up in Vue Devtools, despite the fact that the props and refs are showing up.
What do I need to do to get these variables to show up in the Vue Devtools?
It turns out that this is a known bug with version 6.4.5 of the Vue Devtools for imported components that use the <script setup> syntax: https://github.com/vuejs/devtools/issues/1940
There is a PR to fix the issue here: https://github.com/vitejs/vite-plugin-vue/pull/81
Until that fix is available, the workaround is to use the defineComponent syntax for those imported components (assuming you can change their code).
- How to wait for a prop to change as part of a function?
- ShadCN-Vue installation - did not recognize object of type "TSInterfaceHeritage"
- Using v-model on custom component
- disable-devtool package not updating ref values after route navigation
- Set default value to option select menu
- vue3 - responsive background image from variable
- Dynamically update CSS variable in vue js
- How to add an attribute dynamically in VueJs
- Nuxt3 pages are duplicated twice at the end of the scroll on production
- How Nuxt is diffrent from Vue when it comes to reactive variables?
- Get next tick within Vue3 setup script
- Echart object changed from eChart to '<div>..' Uncaught TypeError: myChart.value.setOption is not a function
- Prevent on click on parent when clicking button inside div
- How to trigger an event on a disabled button?
- Apply a css style to an interpolation parameterusing vue-i18n
- Vuetify open select/autocomplete/combobox menu on focus
- Button that push sidebar in Vue JS and Tailwind CSS
- Universal way to use CommonJS in Javascript with ESM
- How to fix CORS error on 3rd party API call in Nuxt 3?
- Tauri app build error Couldn't to execute windres to compile
- Veutify v-file-input validation
- how to open external link in new tab else same window using q-btn of quasar - vue
- Is it possible to alter a named slot's css directly via data-attribute/name within vue?
- How to set data into nuxt.js nuxt-link?
- did you register the component correctly? For recursive components, make sure to provide the "name" option
- setup script for more than one component from one place - Nuxt3
- vuetify icon not showing
- How to get $refs using Composition API in Vue3?
- VS Code Vue <template> <script> <style> autosuggestion
- Extra quotes when converting Date to string for fetching request