Skip to content

General notes while developing with Vue

Updated Resources

  • Vue filters no longer included.
  • Use methods on v-for rather than filter. Call the item as a method
  • Ex:
    • <li v-for=" story in famous(stories) " >
    methods: {
        famous: (stories) => {
            return stories.filter(  (item) => {

                console.log(item)

                return item.upvotes > 20
            })
        },
        now: function () {
           return Date.now()
        }
    },
  • Ajax requests for Vue
  • axios - Replacement for vue resources http

TypeScript Notes

// tsconfig.json
{
  "compilerOptions": {
    // ... other options omitted
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Vue Components

import Hello from '../vue/components/Hello'
Vue.component('hello', Hello)
* Now available globally

Child/Parent Communication

  • How to get the parent to update it's value from the child.
  • Vuejs 2 changed how it is done. .sync has changed.
  • Components
    • Parent - wordpress
    • Child - story
      • props: [story, favorite]
  • On Child
    • button - <button v-show="!isFavorite" @click="setFavorite" class="success button tiny">Favorite</button> - on click, call setFavorite method.
    • method - emit event to favorite, send the current story as the object.
    private setFavorite() {
        this.$emit("favorite", this.story);
    }
  • On Parent
    • in Template - v-on:favorite="updateFavorite(story) - event is favorite, method is updateFavorite and pass in the story.
    <story v-for="story in stories"
            :key="story.id"
            :story="story"
            :favorite="favorite"
    v-on:favorite="updateFavorite(story)"></story>
  • method to update the favorite the current story.
    public updateFavorite(story) {
        this.favorite = story;
    }
  • Favorite is now pointing to the current story. Only one favorite.

Create module for npm

VueRouter

  • Getting Router hooks to work in vue-class-component.
  • Fix issue with relative css files not being loaded. Cause page not to reload.
  • Fix Issue with TypeScript and router.push - Argument type `{name: string} is not assignable to parameter RawLocation.

Vuex

Options for admin/personal admin sites

  • https://w3layouts.com/preview/?l=/modern-admin-panel-flat-bootstrap-responsive-web-template/

Components