advanced-vue/README.md

# real-world-vue

## Course Take aways:

- Installation of [NProgress](https://github.com/rstacruz/nprogress) to create a better experience for a user when they are interacting with our application.
  - Axios Interceptors
    - Not optimal for multiple API calls
    - We do not want to show the user the template before the data is available.
  - In-component Route Gaurds
  - Global and Per-Route Gaurds (Unltimately will use this.)
- Use the `npx json-server -d 1500 --watch ./db.json` command to simulate a slow network response.
- Good reasons to use interceptors:
  - On request to set authorization tokens
  - On respinse to format or filter data before it reaches into your app
  - On response to catch 401 not authorized responses

## Following along?

We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.

| Lesson                               |                                                                                                              |                                                                                                               |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| 2 - Vue CLI                          | n/a                                                                                                          | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson2-cli-finish)                   |
| 3 - Optimizing your IDE              | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson3-editor-start)                | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson3-editor-finish)                |
| 4 - Vue Router Basics                | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson4-routing-start)               | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson4-routing-finish)               |
| 5 - Dynamic Routes & History Mode    | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson5-dynamic-routing-start)       | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson5-dynamic-routing-finish)       |
| 6 - Single File Components           | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson6-sfc-start)                   | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson6-sfc-finish)                   |
| 7 - Global Components                | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson7-global-start)                | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson7-global-finish)                |
| 8 - Slots                            | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson8-slots-start)                 | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson8-slots-finish)                 |
| 9 - API Calls with Axios             | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson9-axios-start)                 | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson9-axios-finish)                 |
| 11 - Vuex State & Getters            | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson11-vuex-start)                 | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson11-vuex-finish)                 |
| 12 - Vuex Mutations & Actions Part 1 | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson12-mutations%26actions1-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson12-mutations%26actions1-finish) |
| 13 - Vuex Mutations & Actions Part 2 | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson13-mutations%26actions2-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson13-mutations%26actions2-finish) |
| 14 - Vuex Modules                    | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson14-modules-start)              | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson14-modules-finish)              |
| 15 - Success & Error Notifications   | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-start)        | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-finish)        |

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```