Introduction

[00:00:00]
>> Hey everybody, I'm really excited to be here today. This is a continuation of our Vue learning journey. Today we're gonna be building web apps with Vue and Nuxt and I'm so excited about this course. I love working with Frontend Masters and really thank them for allowing me to do this course on their platform.

[00:00:16]
We're gonna be doing a ton of live code today. We're gonna be building all sorts of cool stuff. So I'm super excited to be here. This is me as Optimus Prime because we're gonna optimize some of our code. That's a terrible joke [LAUGH]. If you need to get ahold of me, this is my Twitter handle.

[00:00:36]
I am VP of Developer Experience Engineering at Netlify, and I also work on the Vue core team. Lately I've been focusing a lot on the documentation as we have just come out with this major Vue 3 release. Cool, so welcome. Some of the prerequisites for this course. Either you should have watched the intro to Vue workshop because we're gonna be assumptive that you have some of that knowledge already.

[00:01:01]
Or, going through the Vue documentation or any kind of foundational Vue knowledge. So we're not gonna start from the very beginning. What we're gonna do is we're gonna take the knowledge that we've already built and start to build web applications and see what that's like. We're also gonna be using modern JavaScript.

[00:01:20]
So if you need a brush up on any of that, then there's other courses on this platform that are really awesome for that. Cool, so what we're gonna learn today, tons of stuff actually. We're gonna learn how to set up applications with Vue-cli. We're gonna set up applications with Nuxt as well.

[00:01:37]
And we're gonna kind of see the differences between those two. We're gonna do different types of configuration and we're also gonna deploy our apps. We're gonna deploy our apps using this Nuxt static mode and it creates dynamic routes for us. So that's gonna be really exciting to show.

[00:01:55]
We're also gonna be working a lot with a Vuex store and see how we can do centralized state management for an application. We're gonna use directives effectively, we're gonna use directives for all sorts of things. We're gonna use directives for the things that you might have seen in the last course like V4, v if conditionals.

[00:02:13]
But we're also gonna use it for some things like emit and to bind to props. We're gonna create dynamic pages from API data. So just the way that you might in a bigger application. We're gonna make a food application where we bring in an API from AWS. And we work with that API to generate dynamic pages and data.

[00:02:34]
We're gonna create reusable components. We're gonna make components that can be encapsulated and be reused throughout an application. And we're gonna use Composition API in Nuxt at the end of the day, so I'm gonna show you what it takes to work with Composition and API in Nuxt right now.

[00:02:54]
As we're kind of getting Nuxt settled into this new Composition API world. And some of the gotchas that you should be aware of as you're working with that. So here are the projects that we're gonna be building through the day. For the warm up, and by warm up, I mean like for the first hour or so maybe more, we're gonna build a game and this game is going to be very, very silly.

[00:03:19]
But the thing about games that I really like is that you really able to focus on state management in the game. There's a ton of state that you're focusing on when you track what people's scores are and where they are in the game and things like that. So it's actually a really good use case for building an application.

[00:03:39]
Then we're gonna do a more common use case, we're gonna create a food ordering application. So like Eat 24 or Doordash, or one of those kind of thing. But it's our own, and it will also have bad puns. We're going to create dynamic pages from API data. We're gonna use slots where you're gonna use cart logic.

[00:04:00]
We're even gonna cover validation at the very end. And then the last thing we'll do, is we'll go over Composition API in Nuxt and show you how to get all sorted. So the first thing that we're going over is that warm up that will be done with Vue-cli.

[00:04:15]
The second thing that we're gonna go over is gonna use Nuxt. And the last thing we'll use Nuxt as well. So, if you are curious where to find all of the resources, here is a link to all the resources. It's SGitHub, adras, building-web-apps-with-vue. In this repo, you will find a bunch of problems and solutions and problems and solutions.

[00:04:38]
We will also see a bunch of resources that we're gonna use. So as we come up here, I'm gonna go through all of the tools that I'm using for all of these. It has all of the slides, they all have the same password of Vue. And then we have all of these directories listings so that you can see how we're building everything out.

[00:04:58]
For the game application, we have the game resources directory, which as you might assume, has all of the resources for this game. Then we have the game problem and solution because I'm gonna give you an exercise so that you get used to building. For the food application, we have a number of resources and we're gonna spend more time on that food application.

[00:05:18]
So we have a number of exercises through the day, problem and solution, problem, solution, problem and solution. And then for the Composition API, we have the start and the solution for you to check out. We're not gonna cover how to build an API in this course. But I did write a gigantic guide that shows you how to set up an API with AWS, and Lambda, and Dynamo dB.

[00:05:45]
So if you're curious about that piece, I've given you some resources for you to continue your journey learning. In terms of tools, I'm gonna be using VS code through most of this course. My terminal is hyper and I use this thing called hyper power, which sprays particles everywhere, and I have some bash aliases that I can.

[00:06:05]
I wrote an article about how I set them up, I can link them up here. There are also Vue chrome devtools. You'll see those pop up as I'm using Vue. There's going to be a little v that will be highlighted as I'm using the Vue chrome devtools. Right now there's a version of the chrome devtools, that's a number three beta release.

[00:06:29]
We're not gonna use that in this course, because it doesn't connect to Nuxt yet. So we're gonna use the older version of the chrome devtools. But if you watched the other course, it has a link to the Vue 3 chrome devtools. If you're watching this a little bit further in the future, they will merge right?

[00:06:46]
And we will come back to that stable release of Vue chrome devtools. I'm going to be using some snippets that I've built called Vue VS code snippets. I mean, I made these but I really enjoy working with them because they help me spit out boilerplate code really quickly.

[00:07:06]
And you can see when I'm working with this, how fast I'm able to work with this application. I did add in some Vue 3 and Composition API snippets. So I now have support for that. We have TypeScript support as well and SASS and LESS. And you can see there's kind of documentation for all of these snippets.

[00:07:26]
There's template, script, and all of these snippets. Vue Composition API, Vuex, Vue Router. Vue Config, Nuxt Config. But also VSCode, if you start to type, VSCode will give you some hints, and you can see that as we're working with it. It's not required that you use these, but just if you're curious how I'm working so quickly with that code.

[00:07:51]
My VS code theme is NightOwl. That's another thing that I built was this VS Code theme. So you'll see my syntax highlighting does that. I also use font ligatures. So you'll see, instead of three lines for an equals, you'll see three lines. And I'll show you that as soon as I get working inside the code.

[00:08:11]
I mentioned the hyper and hyperpower for the particles. I'm using a command line tool called hub to create repos from my command line. So you'll see me do that a couple of times during this course. I'll create a private repo from the command line and then it will exist on GitHub.

[00:08:34]
Here is the article for all of my bash aliases I mentioned before. And I'm using a thing called snippets lab to gather snippets that I reuse for multiple projects as well. And I'll explain that when we dive in.