Build an App from Scratch with Nuxt - Mintbean

Episode Description

Anthony Campolo walks through building and deploying a Nuxt.js application from scratch, covering project setup, page creation, and Netlify deployment.

Episode Summary

In this hands-on workshop, Anthony Campolo guides attendees through building a Nuxt.js application from the ground up, starting with an explanation of what Nuxt is and why it matters. He positions Nuxt as a meta framework built on top of Vue.js that enables universal applications capable of running on both the client and server, drawing comparisons to Next.js in the React ecosystem. After walking through a meta framework landscape that includes static site generators like Gatsby and Gridsome alongside full-stack options like Redwood and Blitz, Anthony moves into a live coding demonstration using Create Nuxt App. He steps through the CLI setup questions, creates pages and layouts with navigation links, and demonstrates Vue's single-file component structure with templates, scripts, and styles. The session culminates in deploying the finished site to Netlify by creating a GitHub repository, configuring a netlify.toml file, and connecting the repo to Netlify's deployment pipeline. A robust Q&A session follows, covering topics like built-in routing advantages over Vue Router, Vuex state management compatibility, SEO benefits of server-side rendering, security advantages of static sites, and the emerging Vue 3 ecosystem and its readiness for production use.

Chapters

00:00:00 - Setup and Audience Introductions

Anthony opens the workshop by explaining the tools attendees will need, specifically Yarn or NPM as their CLI package manager. He shares links for installing both and encourages participants to ask questions at any time, mentioning his background as a former high school band teacher who prefers an interactive classroom environment.

This informal opening sets the tone for the session as a collaborative, beginner-friendly walkthrough rather than a formal lecture. Anthony makes clear that all instructions will be provided in both Yarn and NPM versions, ensuring no one is left behind regardless of their preferred tooling.

00:02:25 - What Is Nuxt and the Meta Framework Landscape

Anthony begins his slide presentation by defining Nuxt.js as a meta framework for universal applications, explaining that "meta framework" means it's built on top of Vue.js, and "universal" means it runs on both client and server. He traces its origins back to a 2016 initial commit focused on server-rendered Vue applications and highlights the SEO benefits of server-side rendering.

He then presents a chart mapping the broader meta framework ecosystem across React, Vue, and Svelte. Static site generators like Gatsby and Gridsome sit on one tier, server-rendering frameworks like Next and Nuxt on another, and full-stack frameworks like Redwood and Blitz at the top. He explains the layout-and-pages architecture that makes Nuxt intuitive, where a layout wraps all pages to provide consistent navigation and structure.

00:10:18 - Live Coding: Creating the Nuxt Project

Anthony shifts from slides to live coding, walking attendees through the Create Nuxt App CLI process step by step. He selects JavaScript over TypeScript, chooses Yarn, skips CSS frameworks and linting tools, and picks the universal rendering mode with a static deployment target for Netlify compatibility. An audience member asks about static site generators, prompting a detailed explanation comparing them to deploying bundled files on an S3 bucket.

The discussion touches on how Netlify and Vercel evolved from that simple static hosting paradigm by layering developer tools on top, and how Nuxt bridges the gap between static sites and full server-rendered applications. Anthony also briefly mentions his Full Stack Jamstack podcast for those wanting to explore these topics further.

00:18:52 - Building Pages, Layouts, and Navigation

With the project scaffolded, Anthony opens it in his editor and walks through the structure of a Vue single-file component, highlighting the three sections: template, script, and style. He creates a new about page by adding a file to the pages directory, demonstrating how Nuxt's file-based routing automatically makes it accessible at the corresponding URL.

He then customizes the boilerplate by swapping default links for his own blog and GitHub URLs, and creates a layout file with navigation links using Nuxt's built-in nuxt-link component. This gives the site persistent home and about links that appear on every page, illustrating how layouts wrap pages to provide consistent site-wide navigation without manual router configuration.

00:25:15 - Git Setup and Deploying to Netlify

Anthony transitions to deployment, initializing a Git repository, staging all files, making the first commit, and renaming the default branch from master to main. He creates a new GitHub repository, sets it as the remote origin, and pushes the project. He then creates a netlify.toml configuration file specifying the build command and publish directory so Netlify can automatically build and serve the static site.

After connecting the GitHub repo to Netlify, he walks through the deployment process, showing the build logs and explaining the JavaScript toolchain working behind the scenes. Once the site goes live, he assigns a custom subdomain and demonstrates the fully functional deployed site with working navigation, about page, and external links — completing the full journey from empty terminal to live website.

00:34:48 - Q&A: Routing, State, SEO, Security, and Vue 3

The workshop closes with a rich Q&A session where attendees explore practical concerns. Anthony explains that Nuxt's built-in file-based router eliminates the need for Vue Router, which he considers one of the framework's biggest advantages. He notes that state management tools like Vuex remain compatible but are not mandated by Nuxt, leaving that choice to the developer.

Discussion turns to enterprise use cases, where Anthony highlights SEO benefits from server-side rendering, performance optimizations maintained by the framework's core team, and the value of a large documentation ecosystem. He also addresses security advantages of the static deployment model and the state of Vue 3 compatibility, advising that while the ecosystem is moving toward Vue 3 support, production projects should still exercise caution given its recent release.

Transcript

00:00:11 - Anthony Campolo

So I'm gonna be using Yarn, but the instructions that I'll be sharing with you will have a Yarn version and an NPM version for whichever CLI tool you're using. But I want to go ahead and

00:00:25 - Anthony Campolo

let me actually first close my million tabs that I've got open. Classic, right?

00:00:33 - Moderator

Okay, Anthony, if they have questions, how do you want to handle those?

00:00:37 - Anthony Campolo

Sure, people are totally welcome to at any point unmute and yell at me and start just asking, you know, what's happening. If what I'm saying doesn't make any sense, it looks like some people don't know what Yarn and NPM are, which is totally fine. So yeah, feel free to unmute. I will try and watch the chat as well, so I'll try and keep my eyes up for whatever is going on. But yeah, please interrupt me. I actually used to be a classroom teacher. Before this I used to teach high school band. I'm used to it — having a quiet classroom is quite strange to me. So please feel free to at any point in time ask me any sort of questions.

So yeah, Yarn and NPM are what you use to install your project. Let me quickly share a couple links for anyone who might need to install these.

00:01:41 - Anthony Campolo

That's not what you want. This is what I want.

00:01:44 - Anthony Campolo

So this will be for Yarn, and I'll be posting these in the chat. This is what I'll be using to install our project. We're gonna be using what's called Create Nuxt App, but if you wanted to instead use npm, you are totally welcome to use that as well. And this is just kind of a different way to install your project. And I'm going to start off just by doing some slides and kind of talking about what is Nuxt, why should you care about it? And I'm not yet sharing my screen. I'm about to.

00:02:25 - Anthony Campolo

I was just getting all my stuff in order. Okay.

00:02:29 - Anthony Campolo

Okay.

00:02:30 - Anthony Campolo

Bam, bam.

00:02:32 - Anthony Campolo

Alright, we all good? Everyone sees my slides. All right, so we are going to be talking about building an app from scratch with Nuxt.js. So Nuxt.js is built on Vue.js. Here's some resources. If you go to the mintbean-nuxt GitHub or the mintbean-nuxt Netlify, those aren't gonna go anywhere — those are what we're building. But if you do the dash tests one, you can see all of the code that we're gonna go through in this project as well as the instructions for how to set up the project and basically what we'll be walking through. So all those resources are already online and we'll get into those once I've gone through the slides. So right now you can just kind of hang tight if you've already got your dev environment set up and you're

00:03:32 - Anthony Campolo

good to go there.

00:03:33 - Anthony Campolo

This is the team behind Nuxt. I think it's always important to talk about who actually built these tools that we're taking advantage of and gaining a lot of value from. So Alexander Chopin and Sébastien Chopin — they are the two who have been working on this from the very, very beginning. And then they have a huge team beyond just these guys. I have no idea what a head of framework does, by the way, but that sounds like a super sweet job. I would love to have that job. And then you have Debs, who is head of learning. If you ever hear a very enthusiastic Irish lady on a podcast talking about Nuxt, that is who it is. She is very visible in the community and kind of communicating what Nuxt is, how it works. I'm a really big fan of her work.

So what is Nuxt? Nuxt, if you go to their website, they will say that they are the Intuitive Vue Framework. Now, I kind of agree with this description — I find Nuxt very intuitive. But this isn't really that descriptive because "intuitive" is a very subjective term. The more descriptive definition, if you know what these words mean, is that it's a meta framework for universal applications.

00:04:52 - Anthony Campolo

Now, if you don't know what those terms are, this is an even worse definition. But what a meta framework means is that it's built on top of another framework. So in this situation, Nuxt is built on top of Vue in a similar way to how Next is built on top of React. And we'll be looking at a comparison chart between those in a second.

To define the other term: a universal application is an application that can both run on the client as well as on the server. What that means is the client refers to a web browser on your desktop or on your phone, and the server is an actual box sitting somewhere in a warehouse that is being accessed anytime you go to a link. This is beneficial for a couple of reasons. The main one, a while ago, was SEO. This is still a big benefit, but it's not as big as it used to be. But to kind of look at the original description, back when this first came out it was described as a minimalistic framework for server-rendered Vue applications. Now if you go to their GitHub.

00:06:10 - Anthony Campolo

This is the initial commit back in 2016, and this is an explanation of how it becomes universal, because it becomes universal by having it rendered on the server. So obviously it can be rendered on the client because it's a client-side application framework — that's kind of what it was originally designed for. So what Next and what Nuxt are doing is they're making these things able to run on the server so that when you have a SEO web crawler that goes and accesses your website, it will see the content, it won't just see a big blob of JavaScript. That's really why it's beneficial for SEO.

But beyond that, you get a whole ton of stuff from Nuxt in terms of just how you actually develop your application that is super, super useful. So this is my meta framework chart that shows all the different meta frameworks that exist. I'm super into this kind of stuff. And if you look at the bottom layer, you have React, Vue, and Svelte — each of those are your main JavaScript framework or JavaScript library that is taking care of the whole user interface, visual components.

00:07:39 - Anthony Campolo

What those don't take care of is the server, how you connect to your database, routing, or how you build a static site. So we have built all of these other tools on top of React, Vue, and Svelte to make it easier for developers to do the things they want to do faster. If you want to build a static site, you would use Gatsby or Gridsome or Elder. If you just wanted to create a blog that's really content-heavy, then you have the server rendering frameworks like Next, Nuxt, or Sapper. Sapper has actually been end-of-life very, very recently, so that's why I have the little rest in peace right there. They're kind of transitioning to this thing called SvelteKit, but that would require an entirely separate talk to explain. And then you have your full-stack frameworks at top, which is Blitz, Bison, and Redwood. This is where I've spent the majority of my open source time — working on Redwood.js — and Blitz and Bison are built on top of Next.

00:08:54 - Anthony Campolo

So this is why I think we're going to see a Blutz or a Bison or a Redwood very soon, essentially taking what they've done on React but doing it for Vue. So watch this space.

This is the explanation of just what your Nuxt application is kind of doing. And the only really important things you have to pay attention to here are the layouts and the pages. What we're gonna be building out when we build our project: there's a layout which is going to wrap all of our pages. So if you think of just like a regular blog, you'd have a homepage, you'd have an about page, you may have a page of your whole archive. And when you click each of those pages, the nav bar at the top still stays there as you're going to the different pages — that's the layout. Or if you have a footer at the bottom that says how to contact you, how to subscribe to your newsletter, those types of things — that's the layout. The layout wraps your pages, and then each of your pages will just have its own file.

00:10:01 - Anthony Campolo

So it's really great because it's super, super simple to work with. And that's the whole explanation of what the framework is. I was not looking at the chat during that, but were there questions that came in?

00:10:18 - Anthony Campolo

Cool. Yeah, it looks like we got a few.

00:10:21 - Anthony Campolo

So I'll go ahead and drop all

00:10:23 - Anthony Campolo

of these links here.

00:10:28 - Anthony Campolo

So here is going to be just the instructions for what we're doing. So if anyone.

00:10:36 - Anthony Campolo

Oops, did not mean to send that to you privately, Shirley.

00:10:40 - Moderator

Sorry.

00:10:41 - Anthony Campolo

There we go. Okay. And let me drop the slides link as well.

00:10:50 - Audience questioner

Hey, Anthony, quick question before we move on. Can you just give us like a very brief 20 second definition of what a static site generator is?

00:10:59 - Anthony Campolo

Yes. Okay, so a static site generator — so you have your HTML, and that's kind of like the content of what your actual website is. So if you're reading a blog post, you'll have headers, you'll have the actual blog post itself, and you can build a tool so you don't have to write each of those webpages by yourself. You can create a tool that will basically generate all the HTML for you. And this is really useful if you want to use something like Markdown. If you've ever read a GitHub README, or if you've ever used dev.to, those both use Markdown. And Markdown is a really simple way to write HTML in a lightweight fashion.

So static site generators have actually been around for close to 15 years now. Jekyll by Tom Preston-Werner was created back in 2008, and that was kind of the static site generator that launched a thousand static site generators. And Gatsby is like the modern version of a static site generator, and Gridsome is like the Vue version of Gatsby. So this is a much longer than 20 second explanation, but I hope that answers.

00:12:21 - Anthony Campolo

That answers the question.

00:12:23 - Audience questioner

I think it does. So let me do a very quick follow-up. So in AWS, whenever I want to deploy a site really quickly, I'll usually create a bundle in React, and then I'll just copy all those files, put it in an S3 bucket, and all I have to do is click Enable files to be rendered as a website. So is that a static site generator? Is that like AWS's version of a static site generator?

00:12:49 - Anthony Campolo

Yes, that is. So what you described there, that is the paradigm that kind of launched static site generators, because you could so easily throw something on an S3 bucket. Everyone started building their own custom tools because they're like, I just have to build something that's going to spit out HTML and I can throw that on a server and then people can hit that server and get my website. Now Netlify and Vercel are what happens when you build 1000 developer tools on top of that, because we want to be able to build these static sites in a way that lets you do all the things you could do with a non-static site. So the opposite of a static site would be something that's on a server. This is why we're talking about server-rendering things. This is why Nuxt is such a great tool, because static sites can only get you so far. So we're trying to build out all these things that allow us to create a full-stack Jamstack static site kind of thing. But yeah, you're totally on track with that.

00:13:54 - Anthony Campolo

Throwing it up on an S3 bucket — yeah, that was kind of the easiest way to get a website up for a very long time.

00:14:03 - Audience questioner

Awesome, thank you so much. Really appreciate it.

00:14:05 - Anthony Campolo

Yeah, no problem. I have a whole podcast about this called the Full Stack Jamstack Podcast, if you want to know more about that. Okay, so are there any more questions before I start actually doing things? Okay, so as I said, you can go to this GitHub link, and these are hopefully clear instructions of exactly what I'm about to do and build. These are the Yarn instructions. You're gonna use Yarn to create the Nuxt app, and that Nuxt app is going to be called mintbean-nuxt. It's going to ask you a million setup questions that I'll go through one by one, and then you'll cd into that directory, open your editor, and start your development server. We'll be doing that with Yarn. And if you're using npm, you'll use this npx create-nuxt-app command and you'll create this mintbean-nuxt thing. You will answer the exact same set of questions except with npm instead of Yarn, and then you will start your development server with npm run dev. All the instructions after that will be agnostic to npm or Yarn.

00:15:24 - Anthony Campolo

So hopefully that all makes sense.

00:15:28 - Anthony Campolo

So we'll start here and we will open our terminal.

00:15:33 - Anthony Campolo

So this is going to just kick off our project. What this is doing is generating a boilerplate for us. If anyone has ever used Create React App, this is a fairly similar process. It's going to give us a little bit more than Create React App would, because there is also a Create Vue App — this is a level of abstraction on top of that. But most of this we're just going to hit Enter. So if you hit Return, it's just going to give us this project name, and it's going to ask whether you want to use JavaScript or TypeScript. I do not know TypeScript very well.

00:16:15 - Anthony Campolo

So we will be doing JavaScript, and

00:16:17 - Anthony Campolo

then I am using Yarn, so I will pick Yarn. If you're using npm, you will pick npm. These are all of the different CSS frameworks you can use. So if you're a big CSS person, you've probably heard of Tailwind and a bunch of others. We're not gonna use any of these, but it's nice that if you want to use any of those kind of frameworks, there are built-in commands to get you going. Here is where you can add on Axios, which is what you would do to make a call to an API to fetch data. We're not gonna mess with any of this — we're just gonna create as simple of a project as possible. We're not gonna use any linting tools either. And then we're not gonna use the testing framework either. We just wanna do the very simplest possible thing. And then here we're going to choose universal. So when I had the slide that said a meta framework for universal applications, that's what it's referring to. And then here we're going to pick static, because we're going to deploy this website to Netlify at the end of this demonstration.

00:17:34 - Anthony Campolo

So this is going to make it really easy to just throw it up right on Netlify. And then we're not going to use any of these development tools. And then that is my GitHub username.

00:17:45 - Anthony Campolo

You will put in your GitHub username.

00:17:48 - Anthony Campolo

And then version control system — we'll be using Git. That is all the questions, and those are all answered in this GitHub document if I went through that too fast for you.

00:18:01 - Anthony Campolo

And this will take a little bit

00:18:04 - Anthony Campolo

of time here to install everything. As with most things when you're streaming, there's a little bit of delay. If you were doing this on your computer just by yourself, it would go much faster.

But just to kind of look ahead to what we're going to be doing after we create our project: we're going to commit that project to Git and create a GitHub repository. I'll walk through that as well once this is done. And then we are going to take this boilerplate that it gives us and make some slight edits to it, just to show you what the workflow is of using a Nuxt app.

00:18:52 - Anthony Campolo

Alright, cool.

00:18:54 - Anthony Campolo

So now that we have created the project, you can see that it gives you some instructions over here. So to get started, you're just going to cd — that stands for change directory — into that directory that we just created.

00:19:08 - Anthony Campolo

So we're gonna cd into mintbean-nuxt.

00:19:13 - Anthony Campolo

So now you see here, we're inside that directory, and yarn dev is going

00:19:18 - Anthony Campolo

to start our development server.

00:19:23 - Anthony Campolo

And so what this is going to do is it's going to basically start up our application and let us open it on localhost. So we're going to go to localhost:3000 once this starts up. It has client and server going — going back to this being a universal application, it runs both on the client and the server.

00:19:49 - Anthony Campolo

So we're just going to take this link right here and we're going to go right here, and this is it.

00:19:57 - Anthony Campolo

So this is the kind of boilerplate that Nuxt gives you out of the box. So we're going to

00:20:07 - Anthony Campolo

open up this

00:20:08 - Anthony Campolo

project that we've created. And the main thing that you need to know about a Nuxt application is that it's all about the pages. The pages is what really runs your whole project. So if we look at this over here on the right and this over here on the left, this is what we're looking at — this is our Vue component. And the Vue component has three things. It has this template, which is our HTML. So we have a bunch of divs, we got an H1, got some more divs, we got an A tag with a link. If you know HTML, everything inside of this template should make a lot of sense. The only weird thing is this logo right here. So this logo is a component, and our logo component is here, and that's this thing. We are taking this logo component and importing it into our index page — our home page. So if we wanted to create another page, all we have to do is create another page in our pages folder, and we call it about.vue.

00:21:35 - Anthony Campolo

And the code for that is gonna be right here.

00:21:41 - Anthony Campolo

So we're going to save that. And then if we go over here and we go to /about, we now see that we have this new about page that we just created. We have the about H1 here and then we have "this page tells you about stuff." So that is that. But actually what I wanted to do

00:22:03 - Anthony Campolo

was take all of this because I

00:22:08 - Anthony Campolo

want the styling as well.

00:22:17 - Anthony Campolo

There we go.

00:22:18 - Anthony Campolo

So as I was saying, we have three pieces here. We have the template, then we have the script, and then we have the styling as well. So by adding in this styling, you also get all the nice CSS there

00:22:33 - Anthony Campolo

that we got from our index here.

00:22:36 - Anthony Campolo

So if we look at this, we can just change stuff and it will be reflected over there on the side. So all I had to do was make a change and click save and then it would change over there. What we want to do here is we're going to just change those links. So instead of going to docs, I want to go to my blog.

00:23:02 - Anthony Campolo

So we're going to change this to dev.to/ajcwebdev. Now if we save that and if

00:23:11 - Anthony Campolo

we click Blog, it takes it to my blog. Then we also want to change our

00:23:17 - Anthony Campolo

GitHub here so that we got ajcwebdev.

00:23:25 - Anthony Campolo

Now if I click my GitHub over

00:23:27 - Anthony Campolo

here, it's gonna take me to my GitHub.

00:23:34 - Anthony Campolo

We've got some pages, we can make as many pages as we want, put whatever we want in our pages. What we can also do is create a layout. And the layout is what is going to wrap all of our pages. So what I want for this layout is I want to create a link to my about page. So the way we're gonna do that

00:24:00 - Anthony Campolo

is we're gonna use this nuxt-link right here.

00:24:04 - Anthony Campolo

And if we just throw that in there, we will see it right here up top. But what I want to do is I want to also be able to come back to the homepage when I'm on the about page. So I also want this link to the homepage here.

00:24:22 - Anthony Campolo

So I'm just gonna take this whole thing and do that.

00:24:28 - Anthony Campolo

And now what we're gonna have is we're gonna have two links here. Click about and it will take us to our about page.

00:24:35 - Anthony Campolo

We can go home.

00:24:36 - Anthony Campolo

It takes us back to our homepage. And yeah, so that is the website, but it is not a website yet. All this is is a thing running on my computer, on localhost. What we actually want is we want this to be on the Internet so that anyone can see this beautiful webpage that we've just created. And the way we're going to do that is we need to create a GitHub repo.

I also — you can delete all of this stuff. I kind of skipped that step, but just kind of clean your project up a little bit. These are all things that come out of the project by default but that you don't need for what we're doing today. So you can kind of clean up your project. There's a lot of stuff going on, it could be a little overwhelming at first. But these are our git commands. So I'm going to open the terminal here, Command J —

00:25:31 - Anthony Campolo

do not need the debug console.

00:25:34 - Anthony Campolo

And right here what we're gonna do is: if we check our git status, we see that we have no commits and we have nothing tracked. This basically means that as of now, we have not done anything with git. But what we can do is we can do git add and then period, which is going to take everything and put it in the staging area. So now if we check git status, everything is green. And what we want to do is we actually want to commit to git.

00:26:07 - Anthony Campolo

So we're going to do git commit

00:26:10 - Anthony Campolo

and then we're going to create a very descriptive message so our coworkers don't yell at us.

00:26:15 - Anthony Campolo

And it's going to say "first commit."

00:26:20 - Anthony Campolo

Now we have our first commit, and we don't yet have an actual GitHub repo online that we can push this to. The last part here is to change it

00:26:33 - Anthony Campolo

from master to main, which is the thing that — sorry,

00:26:42 - Anthony Campolo

so this changes the main branch from master to main because some people find the master/slave connotation to be offensive. So this is becoming a best practice to change your master to main. And now we're going to create a GitHub repo over here. So we're just going to make a new repository and we're going to call

00:27:07 - Anthony Campolo

it mintbean-nuxt.

00:27:12 - Anthony Campolo

And then this will all be good, and we're going to create a repository. So what this did is it just created this URL here. Now we can take our whole project and put it up there.

00:27:27 - Anthony Campolo

So let me get back to this.

00:27:34 - Anthony Campolo

And what we want to do now is we want to take this command — git remote add origin. What this is going to do is it's going to take that URL that we just created and make it the remote so that we can upload our project to that URL. You are going to want to use whatever your GitHub username is, and if you named it the same thing, then that should be the only thing you'll

00:27:58 - Anthony Campolo

need to change.

00:28:01 - Audience questioner

That.

00:28:03 - Anthony Campolo

And then that's good. We're then going to do this. This is actually

00:28:10 - Anthony Campolo

what will show us

00:28:12 - Anthony Campolo

that we did it correctly. So if we see there, it now

00:28:17 - Anthony Campolo

has origin mintbean-nuxt, and then this is going to push it up.

00:28:30 - Anthony Campolo

Okay, so now if we go back to that URL we created here, and we refresh, then that is now our Nuxt project that we just created, which is now at this URL. And there's one more step we need to do to make sure we can deploy this. What we're going to do is create this file here called netlify.toml. And what this is going to do is make it so Netlify can look at our GitHub repo and automatically know what it needs to do to build the website. If you want to, you could just go to Netlify and enter these commands yourself into the Netlify dashboard. But this is going to make it a little simpler and make it so other people could deploy your website without needing to know anything about Netlify — or maybe deploy it to Vercel instead.

00:29:25 - Anthony Campolo

So we're going to create a new file, it's going to say netlify.toml, and then we're going to take this.

00:29:38 - Anthony Campolo

So this is creating a build command. The build command is nuxt generate. And what that does is it takes your site and creates a static site. So as we talked about earlier, it's generating a static site. Nuxt will be acting as a static site generator and putting that site into this dist folder, which is then what will live on the Internet. Now we did that one step — which I usually forget — you have to actually get this back into your git. So make sure you git commit and give a super descriptive message such as this.

00:30:13 - Anthony Campolo

Whoops, gave one too many.

00:30:18 - Anthony Campolo

And then git push origin. Now if we go back here,

00:30:43 - Anthony Campolo

that's weird. Okay, so sometimes git confuses me.

00:30:54 - Anthony Campolo

And if this is not working, you can just create it right here very quickly and easily.

00:31:00 - Anthony Campolo

And just do that.

00:31:03 - Anthony Campolo

Okay, so now that we have our netlify.toml in our project, then we can go to netlify.com. If you don't have a Netlify account, get one. It's amazing. This is the most incredible tool that has ever been created for web developers. There's actually an idea called the Universal Deployment Machine that Tom Preston-Werner, the creator of GitHub, is very big on. And Netlify is the closest thing to the Universal Deployment Machine we have gotten to yet. Vercel is very nice as well, though.

00:31:41 - Anthony Campolo

I'm also a big fan of Vercel.

00:31:44 - Anthony Campolo

What we're doing here is we are connecting our GitHub, and then we're just going to take that exact GitHub repo that we just created and select it. And then what's going to happen here — see how it's main instead of master? So we changed that. And then those build commands that we put in our netlify.toml are right here. So this has everything it needs now to deploy our site by just clicking a single button. It used to be a lot more complicated to get things on the Internet before this.

What's happening now is Netlify is taking our project and building it, so we can actually see what the server is doing right now. And this is all of the stuff that's kind of happening behind the scenes: you have Babel and webpack and all of these tools kind of built around JavaScript, because we write different JavaScript than our browsers actually understand, since people are still using Internet Explorer — not many, but some. You need to get your JavaScript to work across a million different devices and environments.

00:33:08 - Anthony Campolo

So we have a ridiculously complicated toolchain based around JavaScript now. And that's kind of what's happening here — this is why it takes like multiple minutes to deploy your website, because it has to basically parse your entire project and figure out what all the stuff is. You see here we have like, why are there Maven dependencies in this? Doesn't even make any sense. And once this is done building, it will say "site is live." And you can go up here now and go to deploys. And right here we have a website. Before I click that though, I want

00:33:54 - Anthony Campolo

to give it a domain name.

00:33:56 - Anthony Campolo

So if we go to domain settings, custom domain — going to call this the same thing that the repo was called. So just mintbean-nuxt. What that is going to do is give you your own URL. It's always going to have netlify.app — you have to pay money if you want a .com — but you can create any URL you want. If we go here, this is now

00:34:22 - Anthony Campolo

our beautiful website that we created.

00:34:25 - Anthony Campolo

We can go to our about page, takes us to our about page, our homepage. That's our homepage.

00:34:31 - Anthony Campolo

We can go to our blog or we can go to our GitHub, and

00:34:38 - Anthony Campolo

that is the whole project. So if you followed along, ideally

00:34:43 - Anthony Campolo

you would have your own Nuxt website deployed to the Internet.

00:34:48 - Anthony Campolo

Yeah. Questions?

00:34:52 - Audience questioner

Awesome. Thank you so much, Anthony, that was great. Cool. Yeah, one question. So it seems to me — and please correct me if I'm wrong here — that with Nuxt you don't really need Vue Router.

00:35:07 - Anthony Campolo

Right?

00:35:08 - Anthony Campolo

Correct. So, to me, the biggest benefit you get from something like a Nuxt or a Next is the router, specifically. You don't have to worry about how to route to your pages — you're able to just create a single-file component inside your pages folder and then it understands how to route to that page. This is why I love Redwood as well. Redwood has a router built in. Yeah, I've used React Router, I've never used Vue Router, but I would imagine it's very similar. It's hard, especially when you start getting to things like performance and code splitting and accessibility — there's a lot of stuff that goes into getting routing right. So yeah, having a router built in is, to me, one of the absolute biggest benefits of a framework like this.

00:35:54 - Audience questioner

Awesome. Okay, so it takes care of the routing for me. What about Vuex? Does it still work the same way as if I didn't use Nuxt and just did the Vue CLI to build my project?

00:36:08 - Anthony Campolo

Yeah. So in terms of your state management, it's up to you whether you want to bring in something like Vuex, or whether you want to manage component state just in Vue, or whether you want to bring in an entirely separate thing. I don't know — in React you also have like MobX instead of Redux. So I'm sure there's other things aside from Vuex in Vue land. I think for the most part they're kind of agnostic to the state management layer. But that's something I'm not really super familiar with, so that might not be 100% correct — that's just my impression of what I've seen.

00:36:44 - Audience questioner

Got it. So if someone came up to you and asked, hey, Anthony, I'm about to start a site — it's not just a little pet project like this. This needs to be enterprise grade, robust, and bulletproof. Would you automatically say, okay, yeah, you definitely need the server-side rendering that Nuxt offers? Because I'm trying to understand the use case for something like Nuxt, as opposed to just using the Vue CLI, building a standard SPA, and having it deployed. Like, why Nuxt and why not no Nuxt?

00:37:21 - Anthony Campolo

Yeah. So the SEO thing is the first thing a lot of people are going to talk about. Google supposedly now will execute JavaScript to crawl your website, but from what I've gathered, you're still penalized for that. So if they can actually hit your site and it's been server rendered and they can get the HTML straight from it, just because it parses faster, that leads to a higher SEO ranking. Now, SEO — as far as I know, no one actually knows how it works. So I'm always very suspicious of these types of explanations. But everyone I know who talks about SEO and considers themselves an expert, that's kind of what they say. So discoverability through a search engine is what you're going to get.

Aside from that, you get things like optimizations — basically, you're always going to get optimizations because these frameworks are constantly being worked on and have an entire team of people working on them. And in terms of documentation, tutorials, actually having material that's going to allow other developers to understand your approach to the project — I think that is really important. You can't discount how important that is.

00:38:39 - Anthony Campolo

So having a huge ecosystem of really high-quality developers using Nuxt and constantly having that flywheel effect is something I don't hear many people make that argument about. I think that's a huge argument in its favor, personally. But aside from that, those are going to be the big things.

So I think in general they say that it's made for real-world apps — if you go to their website, that's a thing you see a lot. The idea is that it's supposed to be a pragmatic tool. These guys who are building these tools built them for themselves to make websites faster. So it's partly about having a tool that lets you more intuitively create your website, because that's going to inherently lead to fewer bugs and fewer mistakes, since there are things being taken care of by the framework. So yeah, those would be, I think, the three things I'd say are their main strengths.

00:39:50 - Audience questioner

Awesome. Cool. Thank you.

00:39:51 - Moderator

Yeah, great questions. Anyone else? Anything to ask and pick Anthony's brain?

00:40:02 - Anthony Campolo

Feel free to ask about other things as well. Like I said, I've done work in React, things like Redwood, and more full-stack stuff. So I'm really interested in how people are going to build on things like Nuxt to attach it to a database, because that's one thing that it's not doing right now — there's no data layer, there's no ORM, there's no way to do data fetching with GraphQL that's kind of built in.

00:40:30 - Anthony Campolo

Oh, hey Claire, what's up?

00:40:34 - Anthony Campolo

And yeah, so there's this amazing tool that I think already does a lot of amazing things and people are going to continue to build more stuff to do more amazing things with it. So I think it's a cool ecosystem to get involved in now. It's deep enough into the project that it's gotten pretty sophisticated and can be used to build real things, while still being new enough that you can actually have impact in the community and work on cool stuff and be a part of building the thing itself. So yeah, if anyone's looking to get into open source and actually contribute, I think this is a good framework to be looking at.

00:41:17 - Audience questioner

Are there any security benefits to using Nuxt over not using Nuxt?

00:41:25 - Anthony Campolo

If you're using it to do static site generation like that, that whole paradigm is incredibly secure because there is no server. You can't hack a CDN, as far as I know. And so if you're doing it like what I just did here, there's no database to hack, so it's not like WordPress where you have to constantly have all these updates to your MySQL or whatever because you're getting SQL injections and stuff like that. So yeah, there are tons and tons of security benefits if you're using it in a static way. And that's not a Nuxt-specific thing, but it's a thing that Nuxt can do and that you can use to get benefits that way. So yeah, the whole static paradigm has a lot of security benefits kind of baked in, but if you're going the full-stack route, if you're connected to a database, that's when you have to start thinking about that kind of stuff

00:42:17 - Anthony Campolo

more.

00:42:18 - Audience questioner

Got it. And Nuxt also has support for Vue 3, right? I'm assuming.

00:42:24 - Anthony Campolo

Oh, yeah. So that's — that's a huge can of worms right there. Vue 3 is something that has been developed in tandem with the Vue community. So as I understand it, things like Vue Router and Vuex and stuff like that are kind of just right behind, in the sense that they have been building for Vue 3 as Vue has been building. So yeah, a lot of the ecosystem is getting to the point now where they are Vue 3 compatible. I don't think they're a hundred percent of the way there yet, because Vue 3 just came out like a month ago. And they spent two years working on it. So yeah, it was a very, very long, involved process. And I would imagine it's still kind of somewhat beta in the sense that if you're going to use Nuxt with Vue 3, you probably will hit some bugs. But they're getting there and they've all kind of been in lockstep in terms of getting to Vue 3.

This is actually — I'm going to be giving a talk, hopefully in a month or two, about Vue 3 and the Composition API and all that kind of stuff. And yeah, it's really, really fascinating stuff.

00:43:29 - Anthony Campolo

It's potentially transformative for the entire framework.

00:43:33 - Audience questioner

Yeah, I'm learning Vue 3 now, so that was a really important point of clarification for me, because if Nuxt isn't Vue 3 ready, I think I'll just wait until —

00:43:41 - Anthony Campolo

Well, you can help make them Vue 3 ready. Yeah, I don't know. That's a question that you would have to ask them, and I can't give a super solid answer on that beyond my general impression of the whole ecosystem and where it's going and where it's been, you know?

00:43:58 - Audience questioner

Yeah, that's fair. I mean, I'm just trying to incorporate Bootstrap and Material into my project, and all the documentation is for Vue 2. There isn't really much out there for Vue 3. So what you said earlier about Vue 3 just coming out, still being in its nascent phases, makes complete sense.

00:44:16 - Anthony Campolo

Yeah, totally. Yeah. If you do have to put something in production that people are gonna rely on, I wouldn't be building with Vue 3. But for my own personal projects, I am using Vue 3 because it is the future and it's going to be massive. But they're still right on that precipice of getting it to where it's really ready to go.

00:44:38 - Audience questioner

Awesome. Cool. Thank you, Anthony.

00:44:40 - Anthony Campolo

Thanks for the questions. Those are great.

00:44:46 - Moderator

Awesome.

00:44:48 - Anthony Campolo

Feel free anyone to hit me up on Twitter at AJCWebDev. I'm totally available. I'm on many, many social platforms and always happy to answer questions, help you out with anything you're working on.

00:45:01 - Moderator

You can also find Anthony in our Discord too. Find him on Twitter, on LinkedIn, or even our Discord — you can find him everywhere.

00:45:10 - Anthony Campolo

Cool.

00:45:11 - Anthony Campolo

Thank you, guys. Thank you, Mintbean. I love what you guys do.