[{"data":1,"prerenderedAt":429},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"stack-up-nuxt":121,"stack-up-nuxt-next":161,"sales-reps":177},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":128,"episode_number":132,"published":133,"title":134,"video_transcript_html":135,"video_transcript_text":136,"content":8,"status":137,"episode_people":138,"recommendations":149,"season":150,"seo":8},"ab41049a-0090-4568-ad0d-5a31892ae7c6","nuxt","909728011","In this video, you'll learn how to use the Directus SDK with a Nuxt application.","478b00b9-1d18-4ea4-82a2-52008c71d301",12,[129],{"name":130,"url":131},"Kevin Lewis","https://directus.io/team/kevin-lewis",1,"2024-02-07","Get Started with Directus and Nuxt","\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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?\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>","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.","published",[139],{"people_id":140},{"id":141,"first_name":142,"last_name":143,"avatar":144,"bio":145,"links":146},"82b3f7e5-637b-4890-93b2-378b497d5dc6","Kevin","Lewis","a662f91b-1ee9-4277-8c9d-3ac1878e44ad","Director of Developer Experience at Directus",[147],{"url":131,"service":148},"website",[],{"id":151,"number":132,"year":152,"episodes":153,"show":158},"c9653ab5-c084-48ce-b5ce-5195ccbc09a2","2024",[122,154,155,156,157],"b55b2706-5a8e-4205-9a30-66beae51d6b2","8a72cda0-83ae-42ee-8bbf-87685e3021fd","56c91fbe-bb18-480b-b28c-92ec339de085","fafde41d-17cb-49bf-b139-a8ad11e50ae1",{"title":159,"tile":160},"Stack Up","fcc131d2-1a51-4f6b-8a6b-fa6b7c3700bd",{"id":154,"slug":162,"season":151,"vimeo_id":163,"description":164,"tile":165,"length":166,"resources":8,"people":167,"episode_number":169,"published":170,"title":171,"video_transcript_html":172,"video_transcript_text":173,"content":8,"seo":8,"status":137,"episode_people":174,"recommendations":176},"astro","912196620","In this video, you'll learn how to use the Directus SDK with an Astro application.","6f358086-b9de-43fe-a57a-1bab749d0924",9,[168],{"name":130,"url":131},2,"2024-02-14","Get Started with Directus and Astro","\u003Cp>Speaker 0: This is a new ASTRO project created using the ASTRO CLI. In this video, I'm gonna show you how to use the Directus SDK inside of this project. Before we begin, be sure to actually install the Directus SDK like so. And once you've done that, you can run the Astro development server by running npm run dev. We want to create an instance of the Directus SDK that we can use across pages.\u003C/p>\u003Cp>And to do that, we're going to create a helper library. Inside of the source directory, create a new directory called lib, and inside of that, a new file called directus.js. To initialize the client, import the create directus and rest functions. Use the create directus function with your full directors project URL and with the rest composable, and export the newly created directors client from this file. We can then later import this file and use the same client across pages.\u003C/p>\u003Cp>Here in my existing directors project, I've already created a collection called global which contains a title and a description field. And in this project's access control settings, I've ensured that the public role has read permissions over all of the user created collections and, additionally, the director's files collection. I have replaced the page's index dot astro file with the file. I have imported the default layout that came with this astro project, our initialized directors client, the read singleton function from the Directus SDK, and then I've used the SDK to query the global collection. The global collection is now available.\u003C/p>\u003Cp>The data that's returned is now available in this global variable, which we are then rendering into the page as global dot title, global dot description. And the layout that we have here also expects a title prop. So we're also being sure to provide that in here when we use the layout tag. Over in our directors project, we've also set up a collection called pages. And each page has 3 fields, the slug.\u003C/p>\u003Cp>And this is meant to correlate 1 to 1 with the URL being used. So if we go to slash about, this is the page we expect to load, a title and content. Underlying this WYSIWYG editor here is just HTML code like so. Inside of the pages directory, create a new file called slug.astro, where slug is surrounded by square brackets, which denotes the fact that it is a dynamic route. Because all routes must be determined at build time in Astro, a dynamic route must export a get static paths function, which in turn will return an array of params and props.\u003C/p>\u003Cp>Params being the actual page itself, which will feed this dynamic value here in the file name and props to pass the entire object to the file so we can render values from it. So once we read the page's data from Directus, we then map the values into the shape required, which is an array of objects with the params, that's required, and props, which strictly is optional, but we're going to use it here. And then each page itself will feed in the page value here into astro.props. Then inside of the layout, we're passing up a title again. We are displaying the title, and we are using set HTML to take the HTML in that WYSIWYG field and render it directly.\u003C/p>\u003Cp>It's fine, but just bear that in mind going forward. In our director's project, we also have a collection called posts. Just like pages, they also have a slug, a title, and a WYSIWYG content field. But they additionally have an image field, and this is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to the author's collection.\u003C/p>\u003Cp>Authors at this time just have a name, so I can show you how grabbing relational data works. Inside of our pages directory, create a new directory called blog. And inside of that, a new file called index dot astro. This is the file that will be loaded when a user goes to slash blog. This page might look quite similar to ones we've already created, except this time, we are using the read items method from the Directus SDK.\u003C/p>\u003Cp>So we go ahead and read all of the items from the posts collection, but you'll notice there is this second object parameter, which includes some queries. Firstly, fields. Fields is an array that specifies exactly what fields we want to return in this request. We're using it for two reasons. Firstly, we specifically don't want to return all of the data, namely the content field.\u003C/p>\u003Cp>That is a huge amount of textual data that we're just not going to use in this page. So let's not return it and make our return data bigger than it has to be. Secondly, we want to access nested or relational data. We have an author field inside of our posts but this is name. So this is how we access that nested data directly within this request.\u003C/p>\u003Cp>We're also going to sort the results so we get the latest first. In order to create a list item for every one of the posts, we're going to take the post's data and map it and return a list item. Each list item will have a link to the blog post itself slash blog slash slug, which we'll create in a minute, and data around when it was published and who published it. Take note here that this is a nested object. So post dot publish date is a top level property, but post dot author dot name is nested further because it's a relational value.\u003C/p>\u003Cp>To create a dynamic blog post page for individual blog posts, I've created a slug dot astro file inside of this blog directory. Taking note again that there are square brackets because this is a dynamic route. And as with all dynamic routes in astro, we need to export a get static paths function, which will return an array, of items from Directus. But this time, just like before, we can't just return the array as it stands. We have to map that into an array of objects with a params value and a props value.\u003C/p>\u003Cp>Then one of these pages will be created for each one of those posts. And here inside the layout, we have the title and we have the content like before. Now just an additional note here, you'll notice there is an image this time. All images in Directus are available using the full Directus project URL slash assets slash image ID. And then here, we are not going to return the entire huge image, but we are resizing it on the fly to 500 pixels in size.\u003C/p>\u003Cp>We are also returning alt text, which is the description held in the file in direct Now just take a note here that there is also no slash. The Directus SDK will automatically append a slash to the URL that isn't provided at the time of creating the client. So there is a slash in here. So this is our full project URL slash asset asset slash ID with 500. So that is how you integrate Directus with your ASTRO project.\u003C/p>\u003Cp>I hope you found this interesting, and we'll see you in the next video.\u003C/p>","This is a new ASTRO project created using the ASTRO CLI. In this video, I'm gonna show you how to use the Directus SDK inside of this project. Before we begin, be sure to actually install the Directus SDK like so. And once you've done that, you can run the Astro development server by running npm run dev. We want to create an instance of the Directus SDK that we can use across pages. And to do that, we're going to create a helper library. Inside of the source directory, create a new directory called lib, and inside of that, a new file called directus.js. To initialize the client, import the create directus and rest functions. Use the create directus function with your full directors project URL and with the rest composable, and export the newly created directors client from this file. We can then later import this file and use the same client across pages. Here in my existing directors project, I've already created a collection called global which contains a title and a description field. And in this project's access control settings, I've ensured that the public role has read permissions over all of the user created collections and, additionally, the director's files collection. I have replaced the page's index dot astro file with the file. I have imported the default layout that came with this astro project, our initialized directors client, the read singleton function from the Directus SDK, and then I've used the SDK to query the global collection. The global collection is now available. The data that's returned is now available in this global variable, which we are then rendering into the page as global dot title, global dot description. And the layout that we have here also expects a title prop. So we're also being sure to provide that in here when we use the layout tag. Over in our directors project, we've also set up a collection called pages. And each page has 3 fields, the slug. And this is meant to correlate 1 to 1 with the URL being used. So if we go to slash about, this is the page we expect to load, a title and content. Underlying this WYSIWYG editor here is just HTML code like so. Inside of the pages directory, create a new file called slug.astro, where slug is surrounded by square brackets, which denotes the fact that it is a dynamic route. Because all routes must be determined at build time in Astro, a dynamic route must export a get static paths function, which in turn will return an array of params and props. Params being the actual page itself, which will feed this dynamic value here in the file name and props to pass the entire object to the file so we can render values from it. So once we read the page's data from Directus, we then map the values into the shape required, which is an array of objects with the params, that's required, and props, which strictly is optional, but we're going to use it here. And then each page itself will feed in the page value here into astro.props. Then inside of the layout, we're passing up a title again. We are displaying the title, and we are using set HTML to take the HTML in that WYSIWYG field and render it directly. It's fine, but just bear that in mind going forward. In our director's project, we also have a collection called posts. Just like pages, they also have a slug, a title, and a WYSIWYG content field. But they additionally have an image field, and this is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to the author's collection. Authors at this time just have a name, so I can show you how grabbing relational data works. Inside of our pages directory, create a new directory called blog. And inside of that, a new file called index dot astro. This is the file that will be loaded when a user goes to slash blog. This page might look quite similar to ones we've already created, except this time, we are using the read items method from the Directus SDK. So we go ahead and read all of the items from the posts collection, but you'll notice there is this second object parameter, which includes some queries. Firstly, fields. Fields is an array that specifies exactly what fields we want to return in this request. We're using it for two reasons. Firstly, we specifically don't want to return all of the data, namely the content field. That is a huge amount of textual data that we're just not going to use in this page. So let's not return it and make our return data bigger than it has to be. Secondly, we want to access nested or relational data. We have an author field inside of our posts but this is name. So this is how we access that nested data directly within this request. We're also going to sort the results so we get the latest first. In order to create a list item for every one of the posts, we're going to take the post's data and map it and return a list item. Each list item will have a link to the blog post itself slash blog slash slug, which we'll create in a minute, and data around when it was published and who published it. Take note here that this is a nested object. So post dot publish date is a top level property, but post dot author dot name is nested further because it's a relational value. To create a dynamic blog post page for individual blog posts, I've created a slug dot astro file inside of this blog directory. Taking note again that there are square brackets because this is a dynamic route. And as with all dynamic routes in astro, we need to export a get static paths function, which will return an array, of items from Directus. But this time, just like before, we can't just return the array as it stands. We have to map that into an array of objects with a params value and a props value. Then one of these pages will be created for each one of those posts. And here inside the layout, we have the title and we have the content like before. Now just an additional note here, you'll notice there is an image this time. All images in Directus are available using the full Directus project URL slash assets slash image ID. And then here, we are not going to return the entire huge image, but we are resizing it on the fly to 500 pixels in size. We are also returning alt text, which is the description held in the file in direct Now just take a note here that there is also no slash. The Directus SDK will automatically append a slash to the URL that isn't provided at the time of creating the client. So there is a slash in here. So this is our full project URL slash asset asset slash ID with 500. So that is how you integrate Directus with your ASTRO project. I hope you found this interesting, and we'll see you in the next video.",[175],"718b9029-76dd-4b7f-a19f-d9f6cfdc7dc9",[],{"reps":178},[179,235],{"name":180,"sdr":8,"link":181,"countries":182,"states":184},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[183],"United States",[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":236,"link":237,"countries":238},"Michelle Riber","https://meetings.hubspot.com/mriber",[239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,216,427,428],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850421724]