Get Started with Directus and Nuxt

Speaker 0: This is a blank Nuxt project created using the Nuxt CLI, and in this video, I'm gonna show you how to integrate directors with this NUXT 3 project. Now over here in the terminal, the only thing we need to do is install the Directus SDK like so. Before we continue, let's spin up the development server using npm run dev and we can just leave this running throughout the length of this tutorial. Create a new directory called plugins, and inside of that, a file called directus dot JS. Import are required functions from the Directus SDK and then initialize an instance of the Directus SDK, making sure to provide your full Directus project URL and including the rest composable.

Then define a new Nuxt plug in, providing our directus instance, our read item, and read items functions to our entire Nuxt application. In my existing director's project, I've created a collection called global. This collection has a title and a description. In this director's project, the public role has been given read access over all of the user created collections, and additionally, the director's files core collection. Replace Nuxt welcome with Nuxt page to use file based routing, then create a new directory called pages, and inside of that, a new file called index dot view.

Inside of index dot view, create an empty template, which we'll populate in a moment, and create a script setup. We can now import this direct us and read items, function from the plugin, that's why they have the dollar sign in front of them, from use Nuxt app. And then we're going to use async data. We are going to return directors, dollar sign, dot request, and inside of this, we are going to run read items once again with the dollar sign global, and that is because it is the name of the collection. So we will be reading the global collection.

Out of this, we will destructure the response from this, the returned value from this, and we will get the access of data. We will get the property of data available. So if I just put data in here and I go back to the browser, we will see data coming back from directors which is great. Let's clean this up just a little bit. We are going to firstly provide the name of this because I don't like data.

I think that's not very descriptive. We will rename this into global and we will put in here h one global dot title and a paragraph tag global dot description. Going back to our browser, we now see that we have a page with our header and our description directly from Directus. Inside of our directors project, we also have a pages collection. Every page has a slug.

This is the unique ID for this collection, the primary key. It is a manually entered string, and this correlates with the URL that we're going to load this data at. So this will be a slash about. They have a title and they have content. This is a what you see is what you get editor which means under the hood is actually just storing HTML.

Inside of your page's directory, create a new file called slug dot view where slug is surrounded by square brackets because it is a dynamic route. This is very similar to when we used our global data with some notable differences. Firstly, instead of using read items, we are using the singular read item function. Because we only need the specific item for any given page, that matches this dynamic value. How do we get that value?

Firstly, we are going to utilize the use route composable provided by Nuxt. Then, inside of the director stock request when we run read item, the first argument is the collection and the second one is the specific ID of the item we're grabbing. We can now, because we have, created a use route instance here, we can use route dot params.slug. If we head to slash about, we see that data is loaded in correctly. We see it's mostly an a string of t m l, but we also have the slug and the title.

Let's improve the way this looks. Firstly, we're going to once again have an h one with page dot title. We're also gonna use a div with v HTML as an attribute, and that value will be page dot content. This will render out the HTML directly. Just a note for from a security standpoint, you have to know that this content is safe in order to use the HTML.

If only you are the author or all the authors are trusted, then this is a fine approach. We now see this page is being properly rendered with all of the correct HTML tags. The last thing we want to do is ensure that if a page does not exist in Directus that we successfully throw a 4 zero four not found error. So we can add this code in the bottom to achieve that. Our directors project also includes a posts and authors collection.

Inside of a post, just like before, we have a slug, a title, and a content field. But there are some extras. Firstly, an image, which actually is a relational field to the director's files call collection. We'll see how this works in a minute. A publish date and a relational field to an author.

Our authors just have a name for now because I wanna show you how relational data works. Inside of our pages directory, let's create a subdirectory called blog. And inside of that, a file called index dot view. This is the file which will be loaded when someone goes to slash blog. In order to load a list of blog posts, we're going to use read items.

Inside of read items, we're going to query that post collection. But this time, we're using some of Directus' inbuilt query, properties. Firstly, we're using fields to specify the specific fields we wish this request to return. This is important for a couple of reasons. One, we don't want to return the entire blog post itself because that is a large amount of data that we're not actually going to use on this page.

Secondly, we want to access a kind of property of that relational author value. So, here, we're getting the slug, the title, the publish date, and the author's name. Remember that this is held inside of that author's collection, not inside of the post's collection. We're also using a sort to make sure that the newest post comes first as is typical on most blog posts. To actually render the list, we're gonna fall back on our view fundamentals.

We're going to create a loop. And for every item in the loop, we're going to render a list item which contains a link that goes to slash blog slash and then the dynamic slug will render the title, the publish date, and the post dot author dot name. So that's a nested value there. And in our browser, we now see a list of blog posts latest first. Now, if we click on one of these links, we actually get a 404 and that's because we haven't yet built the blog single page.

But take note that this was sending us to slash blog slash and then the slug for this individual post. Back in our editor, inside of this blog directory, create a file called slug dot view where slug is a dynamic route. At this point, hopefully, you should start to see some patterns. Inside of an individual blog post, we are using read item and the route param slug once again. Except this time, we are also using the fields query, parameter.

So here we have, an a wild card that says, give me give me every field related to this blog post, but I also want to grab some relational data. I once again want the author's name. And out of the image, I want the ID and the description of that image. And if nothing comes back, if this post does not exist, once again, throw a 404. I'll move this down so it's a little more readable in in all.

Once again, we're just putting in the post title and the post content using the HTML with once again a note that you have to be able to trust this content in order to use the HTML and not otherwise sanitized content. And then we have an image tag. This is where we're using director's files. So in here, this is a long string, which, which does the following. Firstly, grabs the URL from our initialized directus SDK in the plugin.

So this value here is equal to this value here. The SDK automatically adds a forward slash if there isn't one present. So this is equal to our project URL slash assets slash ID of the image. And instead of returning a huge image, we're just returning one with a width of 6 100 pixels. It will resize that image on the fly for us.

And then it will utilize the description as the alt text for this image. If we head over now to our individual blog post, which we got to from the listing, we have the image. Following the image, we have the h one, and then we have just all of the HTML from the content, what you see is what you get editor inside of Directus. And that is a summary of how to integrate Directus and Nuxt. You have created a Directus plug in and used it to query data.

You have used a singleton collection for global metadata, dynamically created pages, as well as a blog listing, and post pages. If you want to change what is user accessible, consider setting up more restrictive roles and only accessing valid data at build time. If you wanna build more complex dynamic pages out of reusable components, we have a guide in our docs for doing this. I hope you found this video interesting and have fun with Directus.