First, I am not going to use the terminal in V.S. Code for this application. I prefer to not have it taking up the majority of the screen so I'm going to run it in the background here in the actual terminal.

I'll change into the directory, then I'll run npm run dev and this will compile everything and then it's going to work exactly like how it would in V.S. Code. Let me open up the browser and go to the app.

Everything is still working.

Now, the next thing I want to show you is the GitHub repo that I'm going to be pushing all of the code to. At the end of each guide, after I end the recording, I'm going to push up the code that I updated into this repo and provide a link to it.

That way, you'll always have a spot that you can reference exactly what I typed in, in case you ever run into a situation where maybe something that I typed didn't work the same way that what you're typing you can cross-reference that directly.

Now I'm also going to show you how you can use some shortcuts, so if you remember back to the last project everytime that you create a component in Vue it can be a little bit tedious. You have to create a new file then you add some template tags div inside of that. Then you have to have a script tag with exporting default.

There's just a lot of syntax that you need to add and that can be a little annoying to type out, so what I did was create a user snippet for you that you can use in V.S. Code, so I will also provide this link in the show notes. and so you can go and just copy this from the link to add into Visual Studio code. Let's add it into V.S. Code.

Go to File: Preferences: User Snippets:

Type in Vue.

At the very bottom of vue.json, what you can do is just paste in exactly what is there and then you can get rid of everything that they have so you will be left with a file that looks just like this.

Now I'll hit save. Now we're going to have access to this snippet. So now instead of having to type all of this out from scratch, you can just type vc, which is short for Vue component, and then it's going to generate it for you and then it's also going to allow you to automatically start typing the name of your component if you hit tab again.

Feel free to change this and update it however you want, but this is what I have on my personal system that I build new applications in. So I just copied that and I wanted to share that with you.

Now that we have that, let's go and open this up and let's create those two components. I'm going to go into src, then components, and by default, we have that same Hello World Vue component. I'm just going to delete that and I'm going to create two new files here.

The first is going to be called Homepage.vue and the next is going to be called SearchResults.vue Now inside of each one of these you can now call that user snippet with vc and then hit tab and fill these in.

SearchResults.vue

<template>
  <div>
    <h1>Search results</h1>
  </div>
</template>

<script>
export default {
  name: "SearchResults",
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

SearchResults.vue

<template>
  <div>
    <h1>Homepage</h1>
  </div>
</template>

<script>
export default {
  name: "Homepage",
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

We're going to get rid of most of this eventually, this is just to test everything out, and now we need to go into the router index.js. file.

We need to get rid of hello world since we are no longer using that and instead I'm going to import the home page first just to make sure this is working.

index.js

import Vue from "vue";
import Router from "vue-router";
import Homepage from "@/components/Homepage";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Homepage",
      component: Homepage
    }
  ]
});

Let's save all of that and assuming we don't have any typos or anything then this should be working.

You can see this now says home page, which means this is al,l working properly. From a component perspective, these are the two main components that we're going to be using in this project, so we already have that part done and in the next guide we're going to start building out our first piece of functionality.

Resources

• Source Code
• VS Code User Snippet for Vue Component