Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

16. Composables

Transcript

00:00

Vue 3's composition API gives us a lot more flexibility in terms of reusing logic between different components. If we think about the way that things used to work with the standard export default, what we'd have to do in here is define out any methods that we wanted, any computed properties, and if we wanted to share them between different components, we would have to use mixins,

00:24

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,

00:46

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.

01:08

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.

01:27

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.

01:47

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.

02:05

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.

02:31

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.

02:51

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.

03:16

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.

03:37

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.

04:02

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.

04:23

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.

04:40

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.

05:02

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.

Episode summary

In this episode, we dive into how reusable logic is handled in Vue 3 using the Composition API, and more specifically, how composables help make our lives easier compared to the old days of mixins. We start by looking at how logic sharing used to work with mixins and the typical export default in Vue components, and then see how composables offer a more flexible and tidy alternative.

To make things concrete, we walk through the process of creating a custom composable called useCounter. First, we make a simple helper function in a new helpers directory that uses ref to hold a count value and lets us increment it. We show how to import this composable into any component that needs it—demonstrating on the homepage—and how easy it is to share this logic across the app.

After that, we illustrate Vue 3 and Nuxt 3's handy feature of the composables directory. By moving our composable into a directory called composables, Nuxt 3 auto-imports it, meaning we don't even need to include messy import statements. This tidies up our code even further and keeps things really modular.

By the end of the video, you’ll have a solid understanding of how to set up and use composables in a Vue 3/Nuxt 3 project, and you’ll see why they’re such a big improvement over mixins for sharing logic!

Episode discussion

No comments, yet. Be the first!