Search⌘ K
AI Features
Home
Courses
A Beginner’s Guide To Nuxt 3

Adding Reactivity Using Ref

Explore how to use ref in Nuxt 3's Composition API to make primitive values reactive. Understand when to choose ref over reactive, manage data updates, and maintain proper reactivity in your Vue.js application templates.

We'll cover the following...

Reactive objects like these are great if we have multiple values, such as our user and darkMode values:

Javascript (babel-node)
<script setup>
let state = reactive({
	user: null,
	darkMode: false,
});
</script>

What about simple, primitive values such as a number or a string of text?

Javascript (babel-node)
<script setup>
const user = 'Bob'
const age = 32
</script>

Creating a reactive object with ref

We know that any updates to our variables will not cause the data inside the template to update. This may cause issues if, for example, the user make changes. It is possible to convert this to a property on an object if we ...