Vue 3 - can i avoid using .value everywhere?

Question

I'm quite new to Vue 3 and i'm struggling a lot to understand some concepts of the composition API. I'm trying to port a library i'm using from vue 2 to vue 3, and in a parent element a reactive property called layout is passed to children components.

So in the parent component i'm returning layout to the children like this:

setup(props){
    const layout = ref({'width': 10, ... })
    return {
        layout,
        ...
    }
}

The problem is that, in order to access width or any other reactive value in layout from any children component i need to use the syntax layout.value.width. This is quite a problem because through the whole project layout is referenced with layout.width, this means that i need to add a .value to every reference to layout and do the same for all the other reactive variables i'm passing to my children components. Is there any way to avoid this or am i just not getting some important concepts from the composition api?

Answer 1

There are at least two ways:

1. Yes. You can work without the .value. You have to use the vue experimental version

or

2. You can create a reactive variable, like:

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

const layout = reactive({'width': 10, ... })
</script>