vue-mastery/README.md

# real-world-vue

## Best Practices:

### Dependencies

- Use `npm outdated` to get a list of all the dependencies that may be outdated in your project.
- Update a single dependency with `npm update <dependency name>` or update all with `npm update`

### Router

- Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
- Reusable componets should be located in the components directory.
- Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
- Use redirects in `routes.js` if your app was in production to prevent issues with external linking to you site. You can use an `alias` property instead, but this could mean in SEO there could be 2 pages with the same content.
- Dynamic routing provides the params from the route in the `$route.params.<the param name>` for the current route.
- Using `$route` within your component limits it's flexibility. Within the `router.js` you can use the `props: true` attribute on a route. This will send the route params into the component as props. This will allow you to also reuse a componet as a child component sending in the username as a prop. Think of a Modal that an admin would use to see a users profile info without navigating to the user's Page.
- Linking to Dynamic routes looks like: `<router-link :to="{ name: 'user, params: { username: 'Drew'} }">Drew's user page</router-link>`

### Components

- You should register globally 'Base' components. So the components you will use frequently. Examples could be `BaseIcon.vue` or maybe a `BaseButton.vue` component.
- A BaseIcon was created and registered Globally with props that let us dynamically link to symbols in the `feather-sprite.svg` located in our public folder. The dynamic registration of components came from a recipe in the Vue documentation. It required installing `lodash` as an npm dependecy.
- Commonly reusable components like display elemtents, form elements, buttons, and modals can be created like our Base Components using props, but if we want a "dynamic" template we can use `Slots` to insert a custom template.
- Slots get access to parent components (Data, computed properties).
- Scoped slots are when you want the template code to have access to the child components data. (Advanced pattern).
- Adding a name attribute to a slot `<slot name="heading"></slot>` allows you to use multiple slots in your component definition. Our parent component now would use `<h2 slot="heading">My header</h2>` to place the content appropriately
- A `template` tag can be added to provide more than one tag within a slot block. The template can also make use of the `slot=` attribute. Using the `template` tag prevents your component code from getting cluttered with divs. You can also use whatever tags and Components are available to this component and pass it into slots.

### API Calls with Axios

- We will use a mock API using `json-server` library and a `db.json` in the root directory file to be a "Data store" for our mock API. Use the command `npx json-server --watch db.json` to start an API server that runs at `http://localhost:3000`.

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

The `chunk-vendors.#####.js` file is contains all the dependencies of our app.
The `app.###.js` is the app file that contains all of the code to mount and render our app.

The `<link href=/js/about.######.js rel=prefetch>` was included in the head of our built index file. the use of the `rel=prefetch` in this tag declaratively lets us specify resources that our pages will need very soon after loading. Therefor the browser should preload early in the lifecycle before the broswer's rendering machinery kicks in. This makes sure that the resource is available earlier and less likely to block the page's first render. See [MDN preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)

This prefetch occurred because in the router we have a lazy loading declaration.

```
{
  path: "/about",
  name: "about",
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () =>
    import(/* webpackChunkName: "about" */ "./views/About.vue")
}
```

### Run your tests

```
npm run test
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).