advanced-vue/README.md

real-world-vue

Course Take aways:

• You missed it in the vuex course but they started using import Datepicker from 'vuejs-datepicker' in the EventCreate component.

• Installation of 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.
    • We would probably want to use a little indirection using Vuex to track how many APIs are waiting responses before calling done. This would mean having some global state that is tracking this count, starting and stopping the progress as needed.
  • 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. You might want to trigger and action to renew your token, or redirect to login.

• Vue Router provides our solution with 3 addtional hooks called route navigation gaurds. All must call the next function.

  1. beforeRouteEnter(routeTo, routeFrom, next) Which is called before the component is created. You will not have access to this in the targeted component.
  2. beforeRouteUpdate(routeTo, routeFrom, next) Called when the route changes, but still using the same component. Has access to this.
  3. beforeRouteLeave(routeTo, routeFrom, next) Called when the this component is navigated away from. Has access to this.
  • routeTo is the Route being navigated to
  • routeFrom is the current Route
  • next is a function that MUST be called to resolve the hook.
    • next() with no params will confirm the navigation
    • next(false) will cancel the navigation.
    • next('/') with a path will redirect to the provided path. We can also specify a named path next({ name: 'event-list' }) if we wanted. You can put any options that you could put in your router link also with this method.

• An example of using beforeRouteLeave(routeTo, routeFrom, next) might be to prompt a user to save thier work before navigating away from the page.

beforeRouteLeave(routeTo, routeFrom, next) {
    const answer = window.confirm('Do you really want to leave? You have unsaved changes`)
    if (answer){
        next()
    } else {
        next(false)
    }
}

Global Route Gaurds & Per Route Gaurds

Global Route Gaurds allow us to add hooks that run whenever nagigation is triggered. These gaurds are called on the router object. We need to set the router object to a contant.

• beforeEach runs before navigating to any component and must call next()

router.beforeEach((routeTo, routeFrom, next) => {
    next()
})

• afterEach runs before the target route component is created and doesn't have a next method to call.

router.afterEach((routeTo, routeFrom) => {
    ...
})

• The ordering of hooks are as follows:
  1. router.beforeEach() Global gaurd
  2. beforeEnter() Per route gaurd
  3. beforeRouteEnter() Router guard in component
  4. router.afterEach() Global gaurd
  5. beforeCreate() Component hook
  6. created() Component hook
  7. ...

Per Route Gaurds

Per Route gaurds let us tap into for example the beforeEnter hook within our /src/router.js which will run before routing to the component.

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'event-list',
      component: EventList
      beforeEnter((routeTo, routeFrom, next) => {
          fetchEvent()
          next()
      }
    },

Since all the API action calls are occuring in the router lifecycle hooks at this time. You can actually remove all vuex code from the component. This could make your code simpler and easier to maintain. You will need to ensure that the actions in your vuex store are returning the objects you are working with however to ensure this works.

NOTE: Since beforeEnter is only called when the component is created it's use with a component that does paginatation will not work. The fetchEvent wouldn't be called.

NOTE2: Vue Router may get another per-route guard called beforeResolve which called on Create and Update. If it is available it would be a more elegant solution to our pagination problem.

Base Form elements

• Look up vue-multiselect for when you want to use a select field and the options have objects in them.
• v-on="$listeners" means that this element inherits the listners of the parent component
• v-bind="$attrs" won't work for inheriting class and style attributes. Vue will have $class and $style I believe

Form Validation

npm install vuelidate --save

Adding validations to our component adds a computed property $v to our component. This object will have boolean values for the associated validators. When all validators pass $v.$invalid: false.

Advanced folder structure

📂 A pages directory for your Application views and routes.

📂 A layouts directory for your layout templates.

📂 A store directory for your Vuex store files.

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.

To achieve this you would need to have the state returned from the api call and pass that into the target component as a prop.

Lesson
2 - Vue CLI	n/a	Finished Code
3 - Optimizing your IDE	Starting Code	Finished Code
4 - Vue Router Basics	Starting Code	Finished Code
5 - Dynamic Routes & History Mode	Starting Code	Finished Code
6 - Single File Components	Starting Code	Finished Code
7 - Global Components	Starting Code	Finished Code
8 - Slots	Starting Code	Finished Code
9 - API Calls with Axios	Starting Code	Finished Code
11 - Vuex State & Getters	Starting Code	Finished Code
12 - Vuex Mutations & Actions Part 1	Starting Code	Finished Code
13 - Vuex Mutations & Actions Part 2	Starting Code	Finished Code
14 - Vuex Modules	Starting Code	Finished Code
15 - Success & Error Notifications	Starting Code	Finished Code

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