Well that's what Part 2 is for. So why don't we get started with Vite. If you're working along, visit vitejs.dev. And if you're curious about that word, it's simply French for the word quick. Vite is a build tool that takes care of our server, hot reloading, which basically means when I change text within a file, the browser instantly updates to reflect that change. And it also includes a build tool that will bundle up all of our code to make it as performant as possible. All right, let's give this a shot. So I'm going to visit my code directory.

All right, let's give this a shot. So I'm going to visit my code directory. In your case, just go to wherever you store your websites. And I'm going to run npm init vue, and I want the latest version. Now it's going to ask us some questions. The project name, why don't we say my-first-vue-project. All right, do we want TypeScript? No. JSX? No, we're not going to worry about that.

And then finally, testing, we're going to skip that. Cypress is an amazing end-to-end testing framework, but again, we're going to skip all of that. But I will pull in ESLint to help out with code quality, as well as prettier for code formatting. All right, so now it's asking us to run these commands. I will select that and paste it in. All right, here we go. So you can see I have Vite version 2.9 installed, and we have a dev server running at localhost:3000. We've now successfully created a project with Vite and Vue 3.

3000. We've now successfully created a project with Vite and Vue 3. Let's have a look at the code base. In a new tab, I will cd into my first Vue project and open this in my editor of choice. Okay, so immediately I see a bunch of files here. Now, I will warn you, it's always a little overwhelming when you're introduced to a framework. You see a bunch of directories, a bunch of files, and you're not sure what any of them do. And yeah, you immediately kind of feel disheartened, like, here's something else I have to learn. Just stick with it, though.

And yeah, you immediately kind of feel disheartened, like, here's something else I have to learn. Just stick with it, though. Many of the things we've already learned are represented here, so you'll feel right at home pretty quickly. Let's first go into index.html, and you can see, yeah, we did something just like this in our project. It imports a main.js file, and it declares it as a module. All right, there's main.js. And yeah, we can recognize some of this. Notice we are importing createApp from Vue.

And yeah, we can recognize some of this. Notice we are importing createApp from Vue. Before we imported Vue globally, and we just did something like this, where we said Vue.createApp. But it's the same thing. Okay? All right, next you can see it's importing an app file, and it's passing it to createApp. Now you'll remember, when we were first learning, we did everything inline, but then later we extracted it to a file, and the same is true here. Okay? So it's importing this file, and it looks like this is our root component.

Okay? So it's importing this file, and it looks like this is our root component. So look, we have a header here with the Vue logo, and then a message that says, you did it. All right, let's see if we can find that in the browser. There we go. We have a header with a message that says, you did it. Okay, so check this out. If I tweak this file, it will instantly be represented on the page without requiring a reload.

If I tweak this file, it will instantly be represented on the page without requiring a reload. And this is referred to as hot module replacement. So I delete that, and notice the image is now gone. In fact, let's delete the entire header. I'll save it. It recompiles and updates the browser. But let's bring that back real quick. If I now return to main.js, the only other thing you're not familiar with is this router. So if I showed you just this, I think you'd see, oh yeah, I'm very familiar with this.

If I now return to main.js, the only other thing you're not familiar with is this router. So if I showed you just this, I think you'd see, oh yeah, I'm very familiar with this. We use Vue.createApp to build our app, we pass in our root component, and then we mount it to the page. And if we have a look at index.html, there it is. So all of that is super familiar to you, hopefully. The only thing you're not familiar with is Vue Router. So we use Vue Router by importing it, and then we say app.useRouter. Now Vue Router is a first party tool that's going to help us out when it comes to defining our routes, creating our links, history management, scroll position, memory, all of that stuff.

Now VueRouter is a first party tool that's going to help us out when it comes to defining our routes, creating our links, history management, scroll position, memory, all of that stuff comes out of the box. And we can see if I open up this router directory, here it is. Granted, this looks a little confusing, but the bread and butter is right here. This is where we can define an array of all of the routes, or all of the pages, that we want to respond to. So notice for the homepage, and you know what, I always like to keep things as simple as possible when I'm learning. So let's keep it just like this.

possible when I'm learning. So let's keep it just like this. Okay, so now our application responds to a single route. If you visit this URI, or the homepage, we are going to load a component called HomeView. And you can see we are loading the HomeView from this path. Okay, so think of it like this. When you're building a traditional server side application, you're always going to have a Vue, some kind of block of HTML that responds to every URI. So for example, if I'm building a static website, if I visit /about in the browser, then there's probably something like an about.html file that returns the HTML.

So for example, if I'm building a static website, if I visit /about in the browser, then there's probably something like an about.html file that returns the HTML. Or if I'm building a Laravel app, and I visit /contact, well there's probably going to be something like a contact.blade.php file that has all of the data in the form. And the same is going to be true when we're building a single page application. So if the user visits the homepage, we need some kind of HTML to render. And that will be stored in the Vue's directory. And notice real quick this convention where page specific Vue components have the suffix Vue and they are stored in a Vue's directory rather than a general components directory. Very very common.

Vue and they are stored in a Vue's directory rather than a general components directory. Very very common. Now, if we have a look at this, it does feel a little foreign. This isn't quite what we've been reviewing in previous episodes. In previous episodes we had things like this where we exported an object where we declared the template, right? But now we have multiple tags here. I have a script tag, I have a template tag, I can even have a style tag. And also on that note, notice that the file extension is .vue rather than .js. Okay, .vue is a file type that we refer to as single file component.

And also on that note, notice that the file extension is .vue rather than .js. Okay, .vue is a file type that we refer to as single file component. It is a single file that contains your script, its respective template, and any optional styling that should go along with it. It's really cool, I think you're going to love it, and in fact I exclusively use single file components. All you really need to know though is whereas in the past you would export an object where you create the template, well now that template can be stored outside of the script tag. So if we just had something like this, hello world, like that, this would still work. We come back, give it a refresh, and now you have your component.

I fully expect this to be somewhat confusing. We're introducing a bunch of new concepts here, even things like this where we're using camelCase instead of things like the welcome. Well you can actually do both, but nonetheless these are all little changes that can be a bit overwhelming. So I think you should fully expect that. And don't worry, you're going to figure it out, I promise. But why don't we finish up the episode by just figuring out how we can add another page. And hopefully that'll get you a little excited. Right now we have a home page and an about page, but notice that's blank.

And hopefully that'll get you a little excited. Right now we have a home page and an about page, but notice that's blank. That's because I cleared out the router. So let's bring it back. Alright, a home page and about page. Let's do one more. So let's do this. I will take about view, I'll duplicate it, and I'm going to call it contact view. And this will be the contact page. And we'll update this as well.

And this will be the contact page. And we'll update this as well. Alright, so I have my component here, but it's not like we can visit that page yet. So for example, if I go to contact, yeah, that's not going to work. And in fact, notice if I open up the console, no match found for location with path contact. Alright, let's set up a route. So we go into our router, and we'll do another one right here. If you visit /contact, we'll give it a name of contact, and that should load a component called ContactView. Alright, let's import that up here, like so.

component called Contact view. Alright, let's import that up here, like so. Now if I come back, there we go. It works. Okay, so now the only remaining step is to create a link to that Contact page. Let's do that now. We'll go into app.vue, and here's our navigation for the entire site. And notice we have these router links, and that's pulled in right here. And again, think of this sort of like an anchor tag on steroids. Of course, ultimately, it's going to render an anchor tag, but yes, of course, it has