Category: Vue

Sometimes, we want to authenticate a Vue.js app with Azure AD.

In this article, we’ll look at how to authenticate a Vue.js app with Azure AD.

How to authenticate a Vue.js app with Azure AD?

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.

To install it, we run

npm install vue-adal

Then we can use it by writing

import Adal from 'vue-adal'

Vue.use(Adal, {
  config: {
    tenant: '<guid>',
    clientId: '<guid>',
    redirectUri: '<host addr>',
    cacheLocation: 'localStorage'
  },
  requireAuthOnInitialize: true,
  router
})

to call Vue.use with Adal to add the Adal plugin into our Vue app.

tenant is the multi-tenant gateway or Azure AD Tenant ID.

clientId is the app ID.

requireAuthOnInitialize is true if we need auth on startup.

And router is the Vue Router instance.

Conclusion

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.

Sometimes, we want to fire an event when v-model changes in Vue.js.

In this article, we’ll look at how to fire an event when v-model changes in Vue.js.

How to fire an event when v-model changes in Vue.js?

To fire an event when v-model changes in Vue.js, we can use the @input directive.

For instance, we write

<template>
  <div>
    <input @input="handleInput" />
  </div>
</template>

to run handleInput whenever the input value changes.

Conclusion

To fire an event when v-model changes in Vue.js, we can use the @input directive.

Sometimes, we want to change another module state from one module in Vuex.

In this article, we’ll look at how to change another module state from one module in Vuex.

How to change another module state from one module in Vuex?

To change another module state from one module in Vuex, we can call commit with the mutation name with the root option set to true.

For instance, we write

commit("TOGGLE_LOADING", null, { root: true });

to call commit to commit the TOGGLE_LOADING mutation with root set to true.

This lets is commit TOGGLE_LOADING no matter which module it’s in.

If the modules are namespaced, we can add the namespace before the mutation name.

For instance, we write

commit("loading/TOGGLE_LOADING", null, { root: true });

to commit the TOGGLE_LOADING mutation that’s in the loading namespace.

Conclusion

To change another module state from one module in Vuex, we can call commit with the mutation name with the root option set to true.

Sometimes, we want to set URL query parameters in Vue.js with Vue Router.

In this article, we’ll look at how to set URL query parameters in Vue.js with Vue Router.

How to set URL query parameters in Vue.js with Vue Router?

To set URL query parameters in Vue.js with Vue Router, we can call $router.push with an object with the query property.

For instance, we write

this.$router.push({ path: 'register', query: { plan: 'private' }})

to call this.$router.push with an object that has the query property set to { plan: 'private' }.

This way, we have the plan query string parameter set to private in the URL we’re navigating to.

Conclusion

To set URL query parameters in Vue.js with Vue Router, we can call $router.push with an object with the query property.

Sometimes, we want to clear state in a Vuex store.

In this article, we’ll look at how to clear state in a Vuex store.

How to clear state in a Vuex store?

To clear state in a Vuex store, we can call Object.assign.

For instance, we write

const getDefaultState = () => {
  return {
    items: [],
    status: "empty",
  };
};

const state = getDefaultState();

const actions = {
  resetCartState({ commit }) {
    commit("resetState");
  },
  addItem({ state, commit }, item) {
    /* ... */
  },
};

const mutations = {
  resetState(state) {
    Object.assign(state, getDefaultState());
  },
};

export default {
  state,
  getters: {},
  actions,
  mutations,
};

to add the resetState mutation that calls Object.assign with state and the object returned by getDefaultState to merge the property values from the object returned by getDefaultState into state.

This will reset the state property values to the ones listed in the object in getDefaultState.

Conclusion

To clear state in a Vuex store, we can call Object.assign.