Welcome to Next-Level Vue. Prerequisites for this course include knowledge of:

• Vue CLI
• Vue Router
• Single File .vue Components
• API Calls with Axios
• Vuex

In this video, we’ll be getting our example app running and then touring the code. If you’ve been following along with our Real World Vue and Mastering Vuex courses, you can probably skip ahead to the next lesson. But if you’re just joining us, let’s take a look at the example application we’ll be using throughout this course.

---

Downloading the App

The starting code for our app is located on github here. Please download it to your computer so you can follow along.

---

Getting the app up and running

If you navigate to the project from your terminal, you can run npm install to install all of the project’s dependencies.

Since our app will be making API calls, we’ll be using json-server. This is a full fake REST API, which allows us to perform API calls that pull from a mock database. You’ll need to install the library if you haven’t already. To do so, run this command in your terminal: npm install -g json-server. We then need to run the command json-server --watch db.json, which turns on json-server and tells it to watch our db.json file, which is our mock database.

Finally, we’ll need to make sure a third-party datepicker library we’re using is installed, with: npm install --save vuejs-datepicker

Now, to get our app running live, we’ll run the command: npm run serve. Our terminal will let us know which localhost port our app is running on.

---

Exploring the app in the browser

Once we pull up that localhost in our browser, we can see our app.

On the home page, we’re displaying a list of events that we’re pulling in with our API. When I click on an event, we’re taken to the event-show page, which displays the full details of that event. We’re using Vue Router for our navigation, which also allows us to navigate to the event-create page, where we can create an event. We’re alsoalso displaying notifications at the bottom right of our app whenever a form is submitted, or an API call error happens.

Now that we’ve seen the app running live, let’s look the project itself.

---

App Tour

We created the app using the Vue CLI, which gave us this directory structure.

Primarily, what we’re concerned about our db.json file and these directories:

Let’s explore what’s happening in these files.

In our services directory, we have EventService.js, which creates our single Axios instance and which uses json-server to make calls to and from our mock database, which is db.json.

The store directory contains all of our Vuex code, including store.js, which is the root state, off of which branch three Vuex modules: event.js, notification.js, user.js. These modules have their own State, Mutations and Actions, which use our EventService to perform API calls.

In our views directory we have three components that are loaded when we route to those views, some of which have child components. These view-level components include Vuex code as well.

---

Dive into the Code

Hopefully you have a better sense of what is happening in our project. We encourage you to download the app and explore these files if you haven’t yet taken our Real World Vue and Mastering Vuex courses. And if any of these prerequisite concepts are unfamiliar to you, you’ll want to visit those courses before moving on to this on.