A Beginner’s Guide To Nuxt 3/

...

/

Composable Files

Composable Files

Build on our composition API knowledge by organizing code into composable files.

We'll cover the following...

Using the Composition API, we can address some of the limitations of the Options API:

  • Code can be written in a more JavaScript-like way.

  • Related code can be grouped more closely for organization.

However, we have not covered how it makes our code more reusable. The Composition API aims to resolve this, along with improving our organisation even further.

Composable files

Let's look at this example:

Press + to interact
<script setup>
	// user
    const user = ref({})
    function getUser() {
        user.value = { name: "Bob" };
    }
    onMounted(getUser) 
	// products
   	const products = ref([]);
	function getProducts() {
		products.value.push("blue shirt");
	}
	onMounted(getProducts);
    
	// basket
	const basket = ref([]);
	const showBasket = computed(() => (basket.length > 0 ? true : false));
	function updateBasket(item) {
		basket.value.push(item);
	}
    
</script>

Here is an ...