Okay, let's get started and have a look at some of the features and the general folder structure of a NUX3 app. First make sure you have their prerequisites in place. So make sure you have a somewhat recent version of Node. I have version 16 at the time of this recording. If you're using VS Code, make sure you're using the Volar extension, which has great support for Vue 3 features like script setup and even TypeScript support. And if you are using Volar, make sure to turn on takeover mode, which you can read about here, or add this plugin here. Let's go ahead and install a blank NUX3 app.

here, or add this plugin here. Let's go ahead and install a blank NUXT3 app. We can make use of Nuxy, which is the CLI tool for NUXT. So let's copy this. Let's go in here, let's run this command, and let's call it LC NUXT3 example. So let's go ahead and go into that folder. That's npm install. And let me open this up in VS Code. And we can run our project with npm run dev. As you can see, it's making use of Vite instead of Webpack for NUXT3 by default, which is great.

And we can run our project with npm run dev. As you can see, it's making use of Vite instead of Webpack for NUX3 by default, which is great so we can have fast server starts. If you ever used NUX2 before, you probably noticed that the server start time was a bit slow. But now with Vite, it's much quicker. And let's take a look at the default app, or the page in our browser here. And this is what we get. Now if you take a look at the default folder structure, it's pretty minimal. We just have our main component here with this built-in NUXT welcome component that

root element so that route transitions work correctly. So let's just say this is the main page, and let's go back to our browser, and there is our main page. So let's add a few more here. Let's just duplicate this, and let's say about, about page, and one more for our contact page. Change this to contact, and let's go to the about page. And usually when you create new pages, you have to restart the server, so let's do that. And there is our about page, and contact should work as well. Now you can also have subfolders, so let's take a look at that. So say we wanted a posts subfolder.

Now you can also have subfolders, so let's take a look at that. So say we wanted a posts subfolder. Let's say posts, and if you create an index.vue in there, then this will map to the posts route. So again, let's just copy this, and say this is the posts page, and if you want dynamic routes, so this will be /posts. Again, we probably have to restart our server. But before we do that, let's also add a dynamic route. So say we wanted posts/{id} of the post, like this. We can define a dynamic route right in the filename.

So say we wanted posts/{id}, like this. We can define a dynamic route right in the filename. So in Nuxt 2, it used to be _id, or whatever you wanted to name the route variable. But in Nuxt 3, we make use of square brackets. So in this case, [id].vue. And again, let's just grab this, let's paste this, and let's say this is a dynamic route. And to grab the route param, we can make use of $route.params.id in this case. Okay, so let's stop the server, let's try running it again, and hopefully this route.

this case. Okay, so let's stop the server, let's try running it again, and hopefully this route should work now. So let's try this. And there it is. And let's try the posts page. Okay, great. Next up, let's take a look at layouts, which your pages can extend from. So if you define a layouts folder with a default.blade.php file, then all of the pages will extend from this layout.

So if you define a layouts folder with a default default.blade.php view, then all of the pages will extend from this layout. And within that layout, you also have to define a slot, which is where the pages will render. So within here is where the pages will render. So let's grab this. Let's make a default layout. So let's say layouts/default.blade.php, paste that in, let's just say nav goes here, let's wrap this in the <nav> tag. And now all of our pages should make use of this layout. Again, I might have to restart my server here.

And now all of our pages should make use of this layout. Again, I might have to restart my server here. And let's go ahead and do that. Okay, and now you see nav goes here on our pages. So every page should have this layout. Cool. If you want a custom layout for certain pages, you can do that as well. So on the page where you want to use the custom layout, we just have to make use of definePageMeta and the name of the layout. So let's grab this.

page meta and the name of the layout. So let's grab this. Let's make a new custom layout here. Name it custom. Let's just duplicate this one. custom.blade.php, say custom nav goes here. And say we wanted the about page to make use of this layout, let's go to about. And we can just paste in that code we have. Let's make use of script setup here. And the layout name is custom.

Let's make use of script setup here. And the layout name is custom. So that's fine. Let's save that. We have to restart our server. Let's go to the about page. And it should make use of that new layout or the custom layout. It does. Cool. Next, let's take a look at page links.

Cool. Next, let's take a look at page links. So if you've made use of view router before, you probably made use of router-link. And this is pretty much the same, but the component is named NuxtLink. So whenever you want to link to internal pages, then you can make use of that component. So let's go back to the main page here. And let's put a nav in our main layout here. So right here. Let's go ahead and put a ul, li, let's make three of them, and let's make it an anchor link for now.

Let's go ahead and put a ul, li, let's make three of them, and let's make it an anchor link for now. But like I said, we want to make use of NuxtLink for our internal pages. So let's remove these and replace them with NuxtLink. So NuxtLink, we can say to, and then give it the page we want to route to. And let me just close this for now. And so this goes to the homepage. This goes to about, so /about here. And this one goes to contact. So yeah, pretty straightforward if you made use of vue-router before.

And this one goes to contact. So yeah, pretty straightforward if you made use of view router before. And these links should work correctly, and they do. Next let's take a look at how we can customize the meta tags. So say for example, the title tag, you can make use of this useMeta composable and provide the tags you want in here. Or you can make use of meta components, which is what I prefer, and just put them wherever you'd like in your page or your component. So let's grab the title tag. And we are in the default layout here, we can just put the title tag wherever.

So let's just put a title tag somewhere in here. So let's just put it right here. And we can just say about, or sorry, contact page. Does that work? And it does. Cool. Next up, we have the public folder, which is where you can serve your public assets. So say, for example, images or favicons. So let's go ahead and create one here. Let's say public, and I'm going to put an image in here.

So let's go ahead and create one here. Let's say public, and I'm going to put an image in here. Okay, so I put this image within the public folder. And now we should be able to access this image from anywhere in our app. So say, for example, right here in the contact page, put an img tag here. And we can just say image.png image. And this should work, hopefully. And there is the image. Cool. So similar to that, we also have the assets folder, which is where you'll put your assets.

Cool. So similar to that, we also have the assets folder, which is where you'll put your assets that need to be processed by Vite or Webpack. So we'll take a look at an example later on when we install Tailwind CSS, you can put your tailwind.css within the assets folder. Next up, we have the components folder where you can put all of your reusable components. And the nice thing about Nuxt is it automatically imports the components within this folder. So let's go ahead and try that out. Let's make a counter component. So components/counter.vue.

Let's make a Counter component. So components, counter.view. So I'm just going to paste in the code for a typical counter. Here's our template where the counter is displayed. I also have a plusOne computed property here. And we can decrement and increment. I'm using a script setup here. We have our count state, we have our computed property for plusOne. And we have our methods that decrement and increment the state. So let's save that.

And we have our methods that decrement and increment the state. So let's save that. Let's go back to our main page here. So our index. And like I said, it's automatically imported. So we don't have to do it manually. So we can use it directly in the template here. Let me just reformat this. And it's named counter. And hopefully this works.

And it's named counter. And hopefully this works. We might have to restart the server. We'll see. Save that. Go to our main page. And there is our counter. Cool. So you'll also notice that within the counter or anywhere else in our app, let's go back to our counter here.

So you'll also notice that within the counter or anywhere else in our app, let's go back to our counter here. I don't have imports for things like refs or computed properties. You'll see it's commented out here, but it still works. So again, Nuxt tries to auto import everything for you so you don't have to do it manually. So we don't need this import here. And if you take a look at the .nuxt folder, there's a file here called auto imports. And I believe this is everything that Nuxt auto imports. So for example, computed, like we just used, and refs down here. So if you have nested folders like you see here, then Nuxt is going to name your component

Next up, we have the composables folder, which is where you would store all of your view composables. So again, Nuxt tries to auto import these, but it only auto imports files at the top level. So if you take a look at this folder structure here, it's going to auto import this, but also the index file of this folder here, but it won't auto import this. Again, let's take a look at that. Let's make a new folder here called composables. And we'll add one called useMouse. So composables, useMouse.js or TypeScript if you want.

And we'll add one called useMouse. So composables, useMouse.js or TypeScript if you want. And I'm just going to paste in a composable, which you can find from the Vue documentation, which just shows your mouse position. So you can take a look at the Vue docs here and read about composables if you're not familiar with them. And you can find the example there. So as you can see, it's exposing the X coordinate and the Y coordinate based on your current mouse position. It's called useMouse.

mouse position. It's called useMouse. So we should be able to use this in any of our pages or components without importing it. So again, let's go back to our index view. We don't need to import it, but we do need to call it. So we need a script section here. Again, I'll make use of script setup. And let's say const. We'll grab the X and Y coordinate from that composable.

And let's say const. We'll grab the X and Y coordinate from that composable. Again, it's auto-imported. We just have to use it. So use mouse. And now we can make use of it in the template. Let's make another section here. Let's say X is X. And same for Y. And hopefully that should work.