905: You Should Learn Nuxt!  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 905: You Should Learn Nuxt! - Category: #podcasts - URL: https://share.snipd.com/episode/46822427-49c3-460f-b00b-13dbd81e5bf2 ## Document Notes ## Highlights - **CJ's Favorite Framework: Nuxt** - CJ Reynolds has worked with many meta frameworks including Next.js, SvelteKit, and SolidStart and currently prefers Nuxt. - He finds Nuxt to be his favorite after experimenting for about two months. Transcript: CJ Reynolds So welcome, CJ. How's it going? It's good. Thanks for having me on. I am excited about Nuxt. I've been working with it over a month, probably close to two months now, just building with it, learning everything I can about it. And I like it. I've used a lot of meta frameworks. I've used all the meta frameworks. I've built stuff with Next.js and SvelteKit and SolidStart. And I've been messing around with Tanstack Start. And right now, Nuxt is my favorite. That's ([Time 0:01:21](https://share.snipd.com/snip/5cda51d3-ee7c-45ae-adfb-4d622dd92261)) - **Early Excitement for Vue** - Wes Bos compares his excitement for Vue to his early Angular experience with data binding. - Two-way data binding made development intuitive and was a major step up from jQuery hacks. Transcript: Wes Bos It seems to me like the the very same like excitement that i got when i first used angular like the very first angular coming from the mess of jquery that i was writing um and then i remember The very first time i used like data binding in in angular you know like you have an input that was in there at the time it was two-way data binding, which is apparently a big no-no these Days. But I had two inputs. You could type in either one, and then it was mirroring it to a paragraph tag on the page. I was like, holy smokes, this makes so much sense to me and is so exciting. Definitely. ([Time 0:03:46](https://share.snipd.com/snip/5aa819a4-f47b-475d-8d6b-dce553214b5e)) - **Nuxt Builds on Vue Router and Nitro** - Nuxt is built on top of Vue Router and Nitro, allowing file-based routing and server-side routes. - Tools like TanStack Start and Solid Start also use Nitro, highlighting Nuxt's ecosystem influence. Transcript: Wes Bos It does. And so it's actually built on top of Vue router. CJ Reynolds And so I'm going to sound like a broken record, but this is one of the other reasons I like the Vue ecosystem. Things are built in and the Vue router comes from the core team. And if you're not using Nuxt, you still would choose Vue router if you were building like a single page application. But Nuxt builds on top of Vue Router to give you file-based routing and then also like server-side rendered routes. So it uses Vue Router. It allows you to do like programmatic navigation. They have built-in components like the Nuxt link, which allows you to create your links within your app that behave as single-page application links once they've been hydrated and Rendered on the client side. And then it supports file-based routing because it's also built on top of another tool called, or another framework called Nitro. And so when you had Daniel on, he talked about Nitro quite a bit. And actually, that's one of the ideas they had when they were building out Nuxt, is like they're doing all of this stuff that could be very useful to other meta frameworks as well, not Just for the Vue ecosystem. So they pulled out those pieces and that became Nitro. And so now if you look at TanStack Start, it's built on top of Nitro. If you look at Solid Start, it's built on top of Nitro. So all of those pieces that those frameworks now get to use that make them, that allowed them to hit the ground running actually came from the Nux ecosystem. The ([Time 0:05:34](https://share.snipd.com/snip/5d5d36d7-6e4e-4237-8a7e-d2dc3cf8f86d)) - **Use Nuxt's Convention-Based Structure** - Organize Nuxt apps using conventions like putting pages in the "pages" folder and API routes in the "server" folder. - Use the documentation's Directory Structure to understand folder purposes and avoid messy project organization. Transcript: CJ Reynolds So you can create view files, which specifically become pages in your app. They also allow you to do like dynamic params, but they also support API routes. So in your Nuxt app, there is a folder called server and you define all of your API routes in there. And those are actually built on top of a framework called H3. And Nitro is built on top of H3. But H3 was one of the first like runtime agnostic kind of like express replacements. And so when you're building out API routes, you get to use those functions. When I mentioned the server directory, that's one of the other things that reminded me of what I like about Nuxt is this idea of conventions. So if you go onto the Nuxt documentation, then click on Docs and then Guide. There is a section called Directory Structure. And this lists out every single directory that you might have in your Nuxt app. But each one of those has its own documentation. So it has this idea of conventions where like if you put something in the composables folder, it's going to be something that is available throughout your app. If you put something in the components folder, it's available throughout your app. All of your pages go in the pages folder. So just like all of your API routes go in the server folder. So this is another thing I like about Nuxt is their conventions. It's not the Wild West. You could come across a Next.js app where they just put stuff anywhere they want. And they can because it's just JavaScript. But I do like that Nuxt kind of has some of these conventions where any ([Time 0:07:46](https://share.snipd.com/snip/b0562dc6-3e6d-417f-925c-e75ae1af7756)) - **Embrace Nuxt's Automation Magic** - Embrace Nuxt's magic to automate boilerplate and speed development. - Understand the magic under the hood to extend or customize it when needed. Transcript: CJ Reynolds I love magic. I understand people that don't, right? Because at a certain point, it could feel like I have no idea what's going on because everything is handled for me. But I have used Vue long enough. I've used Nux long enough that there are so many things I don't want to have to do. I don't want to have to do them by hand every single time. So I appreciate the magic that they give me because I know what is happening under the hood. But I completely understand that perspective of you come into this and you're like, where is all this stuff coming from? Why is there so much magic? I like it because I don't want to have to write all that boilerplate. And if you understand the magic, like if you do understand where all this stuff is coming from, then you can extend it. But ([Time 0:09:19](https://share.snipd.com/snip/7d9088e0-1a29-43fe-8525-0500569b6de4)) - **Nuxt's Isomorphic useFetch Advantage** - Nuxt's useFetch composable supports isomorphic data fetching on both client and server. - Server-side API requests are optimized by invoking functions directly without network hops. Transcript: Wes Bos What about data fetching? So how does how does that work when you're building a Nuxt app? CJ Reynolds Yeah. So if you want to define calls to your database or things that happen on the back end, you're going to write those inside of your API routes. And so those go in the server folder and the API folder. But any API route you have defined in there has automatic type safety using their built-in composable called useFetch. So for any endpoint you define inside of your view page or view component, you can say useFetch. You're going to get type completion as to what endpoints are available. And it gives you type completion as to what the return type is as well. But one of the beautiful things about use fetch is it's isomorphic, right? It runs both on the client side and on the server side. So you can write one bit of code that awaits a call to use fetch to get that gets back your data. When that code runs on the server, that's going to server side render the page. If you arrive at that page via like a client-side navigation, that request to the API will actually happen on the client-side. And Nuxt is smart enough because of Nitro to see that if a request is happening to an API endpoint inside of server-side code, it just invokes that function directly in your backend. So your API routes can actually call each other, but it's not like doing a network hop. It literally figures out, oh, I'm already running on the server, so I can actually just invoke that other API function. Okay. ([Time 0:11:15](https://share.snipd.com/snip/6e0b7adc-bf56-4f5d-99d8-1d35a7aadf0a)) - **Achieve RPC Like Calls in Nuxt** - Use Nuxt's useFetch composable with API routes to achieve RPC-like experience with type completion. - There is no native form or server actions yet, but community modules are exploring this. Transcript: CJ Reynolds But this combined use fetch composable with APIs gives you an RPC like experience. Oh, yeah. Wes Bos I bet we'll probably see something similar to that in the future. Like Svelte just announced they're doing a synchronous Svelte, which is setting up so that we will be able to get both React suspense-like things in Svelte, but also a bit nicer of RPC. Svelte currently does have the ability to submit from the client to the server via, I think they're called form actions in Svelte. Is that right? CJ Reynolds Yeah. Actions and loaders. Yeah. Yeah. Wes Bos Yeah. But right now they're just, they're tied to a page at a page level. So I bet that the new Sink Svelte stuff will allow us to put those anywhere else. ([Time 0:14:12](https://share.snipd.com/snip/4e1163c9-560e-40c9-a1c2-9cf38b4f9fcd)) - **Use Nuxt Modules for Features** - Install Nuxt modules via the nuxi add command to easily add capabilities like auth, linting, and icon sets. - Search the Nuxt documentation integrations page for modules to fulfill common app needs. Transcript: Wes Bos And let's talk about these like modules or core modules. So let's say you want to build something and you need like auth. Sort of the reason why a lot of people reach for the React ecosystem is there's a module for absolutely everything. And I believe that exists in the Vue and Nuxt ecosystem as well, right? Definitely. CJ Reynolds And there are certain NPM modules that you could just install. It doesn't necessarily have to be Nuxt-specific. It doesn't have to be the Nuxt version, yeah. Especially ones that are based on web standards, because it's built on top of Nitro, if you're thinking about these backend things. But I will point you to the Nuxt docs. So if you go to the Nuxtdocs, click on at the top integrations and then modules, just search for the thing that you want to exist. So for instance, if you search for auth, you can see there's a plugin for KindAuth. They're like a hosted auth service. There is ([Time 0:17:29](https://share.snipd.com/snip/d6a653e3-30b3-452e-8746-b6edafaa1348)) - **Pinia is Vue’s Go-To Store** - Pinia is the standard store for Vue.js, providing reliable global state management. - It integrates well with Vue's Composition API allowing reactive state inside stores. Transcript: Wes Bos The Vue ecosystem is like mature, right? There's equivalents and in many cases, better versions of what we have in other frameworks. CJ Reynolds I would agree with that. And I think same thing, pick any UI framework that you use with React, you can find an equivalent that's well supported and has a good community in the Nuxt ecosystem. Even like a ShadCN, there's a view version. If you search for a view ShadCN, they're making it happen. And there's a ShadCN-Nuxt plugin that automatically sets it up so it's usable inside of your Nuxt app. And of course, there are UI frameworks like specific to the ecosystem. There's a framework specifically called Nuxt UI that looks really nice. In the course, I actually use Daisy UI. So Daisy UI is just a Tailwind CSS framework. So it can be used with anything. And I was able to use it inside of my Nuxt app. Wes Bos Awesome. And Syntax sponsored this one. How do you say that? Pena. Yeah. That's a data store, right? Exactly. CJ Reynolds So I didn't get to talk about that, but that in the world of Vue.js, if you need global state management, if you need a store, everyone ([Time 0:19:31](https://share.snipd.com/snip/5b317ccc-17d7-46c4-bc94-488f4bab3fbd)) - **Community-Driven and Flexible Hosting** - Vue and Nuxt have no major company backing but thrive through community drive. - Nuxt apps can be hosted anywhere thanks to Nitro’s neutrality, supporting many platforms and providers. Transcript: CJ Reynolds About hosting. Wes Bos I think Vue and Nux is like the only framework or the only major framework that doesn't have a massive company behind it. You know, like like Angular has Google, React has Vercel and Facebook. Svelte, I could know. Svelte doesn't have any any any big company behind them as well. CJ Reynolds But yeah, Vue and Nux doesn't, right? Yeah. I mean, technically, Svelte hired Rich Harris, Vercel hired Rich Harris, but still Svelte is not necessarily owned. No, Svelte is not a Vercel project. Wes Bos They're just paying for him to work on it, which is really cool. CJ Reynolds Yeah, but that's the other thing about Vue and Nuxt. It's community-driven. Of course, they have corporate sponsors. You can see on their site who sponsors them, but it's all about the community. It's all community-driven. No one is paying to have certain things done. You're not going to have a rug pull because a company decided to do things a certain way. It's all by the community. And because of that, it's very open. You can host it anywhere. They have docs for Netlify, Vercel, AWS Amplify, Azure, Cloudflare, Dino Deploy, GitHub Pages, DigitalOcean, like anywhere in Vercel. Actually, in the course, I host the Nuxt app on Vercel. So that's possible, too. But yeah, you can pretty much host it anywhere because it's built on top of Nitro and they don't have any allegiance to a particular provider. I will say there is a service called Nuxt Hub ([Time 0:21:18](https://share.snipd.com/snip/ff78d419-a066-4c92-8241-fac31b2747a5)) - **Databases in Nuxt Course** - Use Drizzle ORM and LibSQL for database handling in production Nuxt apps, deploying with Terso. - These tools simplify database integration and deployment workflows. Transcript: Wes Bos That's good. What databases do you use in your course? CJ Reynolds We use Drizzle with LibSQL. And when we're in prod, we deploy to Terso. Wes Bos Beautiful. Cool. Anything you don't like about Vue or Nuxt? CJ Reynolds Like I mentioned, having to jump between folders is something I actually got used to. Initially, I was like, I don't like this. And this is one of the reasons I might not use Nuxt again. But having since then started to build things out with TanStack and also revisited Next.js, I actually do prefer, even though I have to jump around, I do prefer the Nuxt way of doing it. I will say we didn't talk about auto imports. And so this is one of ([Time 0:23:50](https://share.snipd.com/snip/96d16de7-6158-401b-8c9f-c634a40d2519)) - **Leverage Nuxt Auto Imports** - Leverage Nuxt's auto-imports for components and composables to reduce boilerplate imports. - Be mindful that auto-imports can confuse newcomers but can be turned off if desired. Transcript: CJ Reynolds Is one of the things that people might not like about Nuxt is by default, it sets up stuff so that it's automatically imported. So if you define a component in the components folder, you can use that throughout your app and you don't have to import it. If you define a composition function in the composables folder, like use fetch or use my custom thing, you can use it anywhere without importing. You don't have to import it. Don't have to import it. And that some people can find very confusing, especially if you get dropped into a larger code base. You're like, where the heck is this thing coming from? Of course, you can use go to definition. You can hover over it in the editor. It'll tell you. But that's definitely to get used to. I personally like it. Again, the more experience I have, the more stuff I work with. I want to write less code. I want to import less. I just want things to work. So I like it. But that will be something you technically can turn it off. But a lot of the docs are using auto imports or some of the tutorials are using auto imports. So that might be something that takes ([Time 0:24:29](https://share.snipd.com/snip/c9f2d673-aada-4ddb-89f8-aaab0fc23d5e)) - **JSX Support in Nuxt Components** - You can write Vue components in JSX inside Nuxt by using .tsx files. - JSX use is uncommon in Vue docs and may pose a learning challenge. Transcript: Wes Bos What do you think? CJ Reynolds You technically can use JSX in your Nux components. Oh. So like, yeah, you can. Like you literally just call it.tsx, but all the docs are for view components. Everything you find about view is not going to show you JSX, so that's going to be an uphill battle. But technically, you can. They have a component loader because at the end of the day, your view components just turned into a render function. You can use JSX in the exact same way. So technically, if you don't want to leave JSX, you could use it. Wes Bos It could, but not like React hooks or anything like that. That stuff wouldn't work. Simply ([Time 0:26:44](https://share.snipd.com/snip/f7575457-86b7-41be-907c-fef62cdc4122))