Sign up to access "Getting Started with Nuxt 3" right now.

and we would have to import them and define them in an array just here. Now with Vue 3, what we can use is composables, which allow us to create separate files, import them, and then use them. And the standard looks like this. For example, if we had a counter composable, which contained a count and an increment function,

we could go ahead and destructure this by using a useCounter function, and we would normally go ahead and import this at the top just in here. Now if this doesn't make too much sense, don't worry, we're going to go through and actually create this useCounter example. But NUX3 allows us to create a composables directory, which allows us to auto-import these.

It's not a massive thing, but it does really, really help in data development. So let's go ahead and get rid of this example here, and let's go ahead and recreate that example of that counter. Essentially, what we're going to have is over on the homepage a value, which we can increment, and we can also use this on other pages as well.

So a really simple example, but this should give you a good idea as to how this works. Okay, so the first thing that I'm going to do is not use the NUX3 composables directory. Instead, I'm going to create a helpers directory, just something you might normally create in an app. And inside of here, for a Vue composable, we prefix this usually with use.

You don't need to do this, but let's go ahead and do that anyway. So I'm going to say useCounter.js. Now, inside of this, this is the kind of mix-in that we want to use within our project. So I'm going to go ahead and export out the useCounter function, and let's just make sure we export that as a function.

And inside of here, we can basically put all of the logic that we need to get this counter working with a composition API. So the first thing that we're going to need is a count, which is going to be a reactive value. So we're going to need to import ref from Vue, and let's go down here and create out a count. And let's wrap zero or pass zero into that ref value.

What we can do from here is just return that count value. Now we can go ahead and import this function wherever we need this count, and we can use it. Let's try this out first of all. So over on our homepage, inside of script setup, let's go ahead and import useCounter, and we're going to import that from.

We're going to go back into our helpers and useCounter. Great. So now what we can do is destructure this. So we can grab the count from that function or this object that we returned here, and we can assign that useCounter. So now that we have this value, let's go ahead and output this on our page.

So let's output count, and if we go over, we should see zero. Great. So let's just really quickly review that. We've created out a function which contains a ref, which we're returning from here. Over on the homepage, we're importing that function, invoking it, and extracting out the count that we returned just here.

So with this, what we can do is now create an increment function which goes ahead and modifies that value. So that will be count. Because this is a ref, we need to access the value by value, and then we're just going to go ahead and do a plus plus on it. So we can now expose that increment function, go back over to our homepage, and we can pull that increment function in.

This is the kind of essence of the composition API. We can do this instead of registering lots of mixins and importing them into our components and getting into a big mess. So let's go up and create a button here, and let's say increment, and let's attach an event handler on here. So when we click this, we invoke that increment function.

Let's go over and try this out. So let's hit increment, and you can see, sure enough, that increments that value. So while you're working with the composition API, you'll probably be creating a lot of these helpers. What we've had to do here, though, within Nuxt is import this from this helpers directory.

Now, if we go ahead and rename this helpers directory to instead of helpers, composables, what we actually end up with is not the need to import this directly. This will be automatically registered for us, and we don't need to import this at all, resulting in a much cleaner script section. So we've renamed this to composables.

We've got all of our composables in here for our entire app, and then over here, we've not needed to import it. Let's go over, and you can see that it works in exactly the same way. So as you start to create these composables within your app, whatever they're for, you can go ahead and put them in a composables directory, and they'll be automatically available for you within your script.