JavaScript support for Vue.js - 1.4

Supported versions

Component Version Support
Vue.js v2.x, v3.x ✅
Vuex v2.x, v3.x, v4.x ✅

What results can you expect?

In Vue3, components can be authored in two different API styles: Options API and Composition API. Both approaches are supported. This extension creates links to JavaScript Functions that are used as:

  • Vue.js methods
  • Vue.js computed that are used to calculate computed properties
  • Vue.js watchers that are executed anytime a reactive variable changes
  • Vuex actions
  • Vuex mutations
  • Vuex getters

Moreover, this extension supports webservices and creates request service objects:

Icon Description
VueJS Get Request Service
VueJS Post Request Service
VueJS Put Request Service
VueJS Delete Request Service

Vue.js

This extension will create a callLink to Vue.js methods called from:

  • another Vue.js method, computed or watcher (in the following example the increment_twice method calls the increment method)
  • an html5 fragment or source code containing a tag having an attribute starting with “@” and whose value corresponds to the name of a method (see link to the increment method from the App.vue)
  • an html5 fragment or source code containing a function call within an interpolation:
    • in a text interpolation also known as mustache syntax (see call to the square method in the following example)
    • in the argument of a directive attribute (see calls to the increment method or greater_than1 method in the following example)

Thus, when analyzing the following source code:

<template>
  <h1>The count is {{ count }}</h1>
  <button @click="increment">
    increment
  </button>
  <button @click="increment_twice">
    increment twice
  </button>
  <h2>The square of the count is {{ square() }}</h2>
  <h2 v-if="greater_than1()"> Count is larger than 1 </h2>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    increment_twice(){
      this.increment()
      this.increment()
    },
    square(){
      return this.count * this.count
    },
    greater_than1(){
      return this.count > 1 ? true : false
    }
  },
}
</script>

the following results will be obtained:

This extension will create a callLink to Vue.js computed from:

  • another Vue.js method, computed or watcher (in the following example the decrement method calls the greater_than0 computed)
  • an html5 fragment or source code containing a reference to a computed within an interpolation in the argument of a directive attribute (see calls to the greater_than0 computed in the following example)

Thus, when analyzing the following source code:

<template>
  <h1>The count is {{ count }}</h1>
  <button @click="decrement">
    decrement
  </button>
  <h2>The square of the count is {{ square }}</h2>
  <h2 v-if="greater_than0"> Count is larger than 0 </h2>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    decrement(){
      if (this.greater_than0) {
        this.count--
      }
    },
  },
  computed:{
    square(){
      return this.count * this.count
    },
    greater_than0(){
      return this.count > 0 ? true : false
    }
  }
}
</script>

the following results will be obtained:

In Vue.js, a watcher function is called whenever its associated variable is modified. The com.castsoftware.vuejs extension creates a callLink to a Vue.js watcher whenever a modification of variables made with a simple assignment or using the increment (++) or decrement (–) operator. These modifications are checked within:

  • another Vue.js method, computed or watcher (see call from the stockPlus2 function)
  • the argument of a directive attribute in an html5 fragment (see call from the html5 fragment to the Anonymous1 function that corresponds to the arrow function passed as second argument to the watch call)

Thus, when analyzing the following source code:

<template>
  <p>The stock is: {{ stock }}</p>
  <button @click="stock = stock + 1" >Add one</button>
  <h3>{{ warning }}</h3>
</template>

<script setup>
import { ref, watch } from 'vue'

const stock = ref(4)

const warning = ref('')

function stockPlus2() {
  stock.value = stock.value + 2
}

watch(stock, async ()=>{
  if (stock.value < 3) {
    warning.value = 'The stock is too low. Ordering...'
  }
  else {
    warning.value = ''
  }
})
</script>

the following results will be obtained:

Vuex

A Vuex action can be called from:

  • a Vue component using this.$store.dispatch() (see call from the created method to the increment action in the following example)
  • a Vuex action or mutation using the context that the handler gets from its parameter (see call from incrementtwice to increment in the following example)

Also, an action can be mapped with a method using the MapAction API. A callLink is created to the mapped action whenever its corresponding method is called. In the following example a callLink is created from the Counter.vue Source Code to the incrementtwice action due to the @click=“incrementtwice” in the vue.

Thus, when analyzing the following source codes:

// index.js

import { createApp } from 'vue'
import Counter from './Counter.vue'
import store from './store'

const app = createApp(Counter)
app.use(store)
app.mount('#app')

// Counter.vue

<template>
  <div id="app">
    Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
    <button @click="incrementtwice">+</button>
    <button @click="increment">-</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: mapGetters([
    'evenOrOdd'
  ]),
  methods: mapActions([
    'incrementtwice',
    'increment'
  ]),

  created(){
     this.$store.dispatch('increment')
  }
}
</script>

//store.js

import { createStore } from 'vuex'

const state = {
  count: 0
}

const actions = {
  incrementtwice(context) {
     context.dispatch('increment')
     context.dispatch('increment')
     },
  increment ( context ) {handle_increment()}
}

export default createStore({
  state,
  actions
})

the following results will be obtained:

A Vuex mutation can be called from:

  • a Vue component using this.$store.commit() (see call from the created method to the increment mutation in the following example)
  • a Vuex action or mutation using the commit attribute of the context that the handler gets from its parameter (see call from incrementtwice to increment in the following example)

Also, a mutation can be mapped with a method using the MapMutation API. A callLink is created to the mapped mutation whenever its corresponding method is called. In the following example a callLink is created from the Counter.vue Source Code to the incrementtwice mutation due to the @click=“incrementtwice” in the vue.

Thus, when analyzing the following source code:

// index.js

import { createApp } from 'vue'
import Counter from './Counter.vue'
import store from './store'

const app = createApp(Counter)
app.use(store)
app.mount('#app')

// Counter.vue

<template>
  <div id="app">
    Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
    <button @click="incrementtwice">+</button>
    <button @click="increment">-</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: mapGetters([
    'evenOrOdd'
  ]),
  methods: mapMutations([
    'incrementtwice',
    'increment'
  ]),

  created(){
     this.$store.commit('increment')
  }
}
</script>

//store.js

import { createStore } from 'vuex'

const state = {
  count: 0
}

const mutations = {
  incrementtwice( context ) {
     context.commit('increment')
     context.commit('increment')
     },
  increment ( context ) {handle_increment()}
}

export default createStore({
  state,
  mutations
})

the following results will be obtained:

A Vuex getter can be called from:

  • a Vue component using this.$store.getters (see call from created to isEven in the following example)
  • a Vuex action or mutation using the getters attribute of the context that the handler gets from its parameter (see call from incrementIfEven to isEven in the following example)
  • another Vuex getter using the second argument of the getter’s handler (see call from evenOrOdd to isEven in the following example)

Also, a getter can be mapped with a computed using the MapGetters API. A callLink is created to the mapped getter whenever its corresponding computed is called. In the following example a callLink is created from the Counter.vue Source Code to the evenOrOdd getter.

Thus, when analyzing the following source codes:

// index.js

import { createApp } from 'vue'
import Counter from './Counter.vue'
import store from './store'

const app = createApp(Counter)
app.use(store)
app.mount('#app')

// Counter.vue

<template>
  <div id="app">
    Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: mapGetters([
    'evenOrOdd'
  ]),

  created(){
    if (this.$store.getters.isEven){
      doSomething()
    }
  }
}
</script>

//store.js

import { createStore } from 'vuex'

const state = {
  count: 0
}

const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

const actions = {
  incrementIfEven ( context ) {
    if (context.getters.isEven) {
      commit('increment')
    }
  }
}

const getters = {
  isEven (state) {return state.count % 2 === 0 ? true : false},
  evenOrOdd(state, getters){
    if (getters.isEven){
      return 'even'}
    else{
      return 'odd'
    }
  }
}

export default createStore({
  state,
  getters,
  actions,
  mutations
})

the following results will be obtained:

Webservices

Axios

The Vue.js extension supports webservices using Axios:

<template>
  <div class="header navbar">
    <div class="header-container">
      <ul class="nav-left">
        <li>
          <b-dropdown-item @click="onLogout">
            <i class="ti-power-off mR-10" />
            <span>Logout</span>
          </b-dropdown-item>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      toggleSetting: 'settings/toggleSetting',
      setCurrentUser: 'auth/setCurrent',
      setLogout: 'auth/setLogout'
    }),

    async onLogout() {
      await this.$axios.$post('/api/oauth/logout');
      this.setLogout(true);
      this.setCurrentUser(null);

      try {
        await this.$axios.$get('/api/oauth/me')
      } catch (e) {
        // middleware redirects to login page
      }
    }
  }
}
</script>

the following results will be obtained:

Vue-resources

The Vue.js extension supports webservices using vue-resources:

<template>
  <div class="header navbar">
    <div class="header-container">
      <ul class="nav-left">
        <li>
          <b-dropdown-item @click="onLogout">
            <i class="ti-power-off mR-10" />
            <span>Logout</span>
          </b-dropdown-item>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      toggleSetting: 'settings/toggleSetting',
      setCurrentUser: 'auth/setCurrent',
      setLogout: 'auth/setLogout'
    }),

    async onLogout() {
      await this.$http.post('/api/oauth/logout');
      this.setLogout(true);
      this.setCurrentUser(null);

      try {
        await this.$http.$get('/api/oauth/me')
      } catch (e) {
        // middleware redirects to login page
      }
    }
  }
}
</script>

the following results will be obtained:

Fetch

The fetch API can be used in the Vue.js framework, but request service objects are part of the HTML5 and JavaScript extension.

<template>
  <div class="header navbar">
    <div class="header-container">
      <ul class="nav-left">
        <li>
          <b-dropdown-item @click="onLogout">
            <i class="ti-power-off mR-10" />
            <span>Logout</span>
          </b-dropdown-item>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      toggleSetting: 'settings/toggleSetting',
      setCurrentUser: 'auth/setCurrent',
      setLogout: 'auth/setLogout'
    }),

    async onLogout() {
      await fetch('/api/oauth/logout', {
        method: 'POST',
      });
      this.setLogout(true);
      this.setCurrentUser(null);

      try {
        await fetch('/api/oauth/me')
      } catch (e) {
        // middleware redirects to login page
      }
    }
  }
}
</script>

the following results will be obtained: