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

Script Setup and Reactivity

Explore how to use the Script Setup syntax in Nuxt 3 to write cleaner and more efficient components. Understand how to implement reactivity using reactive wrappers to ensure your UI updates dynamically as data changes, and learn to verify object reactivity using isReactive.

We'll cover the following...

Script setup

This example shows the Composition API, which includes a setup section:

Javascript (babel-node)
<script>
export default {
  setup() {
    const user = {}
    function getUser() {}
    onMounted(getUser) // get user when component mounts to the DOM
    const products = []
    function getProducts() {}
    onMounted(getProducts) // get products when component mounts to the DOM
    const basket = []
    // computed value updates when a value inside changes:
    const showBasket = computed(() => basket.length > 0 ? true : false)
    function updateBasket(item) {}
    return { user, getUser, products, getProducts, ...}
  }
}
</script>

  • Lines 4–20: This is the setup() wrapper containing all of the composition code.

While still valid to use, we also have a way to make this shorter and cleaner, using <script setup> inside single file components. We briefly looked at this in earlier examples, and it is now the recommended syntax. It involves removing the setup() wrapper, export default, and the return section. Our above example ...