Category: Vue

Sometimes, we want to change the port number in a Vue CLI project.

In this article, we’ll look at how to change the port number in a Vue CLI project.

How to change the port number in a Vue CLI project?

To change the port number in a Vue CLI project, we can change the port property in the object being exported in vue.config.js.

For instance, we write

vue.config.js

module.exports = {
  // ...
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8088,
    https: false,
    hotOnly: false,
  },
  // ...
};

to change the port property to 8088 to server the Vue CLI project on port 8088.

Conclusion

To change the port number in a Vue CLI project, we can change the port property in the object being exported in vue.config.js.

Sometimes, we want to pass multiple parameters to mutation with Vuex.

In this article, we’ll look at how to pass multiple parameters to mutation with Vuex.

How to pass multiple parameters to mutation with Vuex?

To pass multiple parameters to mutation with Vuex, we can put all the values in the same object and destructure them in the mutation method.

For instance, we write

const store = new Vuex.Store({
  //...
  mutations: {
    authenticate(state, { token, expiration }) {
      localStorage.setItem("token", token);
      localStorage.setItem("expiration", expiration);
    },
  },
  //...
});

to add the authenticate mutation that takes an object with the token and expiration properties.

And then we can commit the mutation with

store.commit("authenticate", {
  token,
  expiration,
});

We call commit with the mutation name and the object with all the values we want to pass into the mutation’s 2nd parameter.

Conclusion

To pass multiple parameters to mutation with Vuex, we can put all the values in the same object and destructure them in the mutation method.

Sometimes, we want to pass data from parent to child component in Vue.js.

In this article, we’ll look at how to pass data from parent to child component in Vue.js.

How to pass data from parent to child component in Vue.js?

To pass data from parent to child component in Vue.js, we can make our child component accept props from the parent.

For instance, in the child component, we write

<script>
//...

export default {
  name: "ProfileForm",
  //...
  props: ["user"],
  created() {
    console.log(this.user);
  },
  //...
};
</script>

to register the user prop with

props: ["user"]

Then in the parent component, we write

<template>
  <div class="container">
    <profile-form :user="user"></profile-form>
  </div>
</template>

to add the profile-form into the parent component and set the user prop to user to pass user down to profile-form with

:user="user"

Conclusion

To pass data from parent to child component in Vue.js, we can make our child component accept props from the parent.

Sometimes, we want to fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js.

In this article, we’ll look at how to fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js.

How to fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js?

To fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js, we should make sure we don’t modify reactive properties in computed properties.

For instance, we write

<script>
//...

export default {
  //...
  computed: {
    getkeys() {
      return this.originalKeys.map((k) => this.getTranslation(k));
    },
  },
  //...
};
</script>

to return an array that we created by call this.orginalKeys.map with a callback that returns the value from this.getTranslation with entry k in getKeys.

We didn’t change any reactive property values in the getKeys method.

Conclusion

To fix the ‘Unexpected side effect in "getkeys" computed property.’ ESLint error in Vue.js, we should make sure we don’t modify reactive properties in computed properties.

Sometimes, we want to navigate using Vue Router from Vuex actions.

In this article, we’ll look at how to navigate using Vue Router from Vuex actions.

How to navigate using Vue Router from Vuex actions?

To navigate using Vue Router from Vuex actions, to import the router into our Vuex store and call push on it.

For instance, we write

main.js

import Vue from "vue";
import VueRouter from "vue-router";

//...

Vue.use(VueRouter);

export const router = new VueRouter({
  base: "/",
  routes: [
    { path: "/", component: welcome },
    { path: "/welcome", component: welcome },
  ],
});

to create a router object and export it.

Then we write

import { router } from "./main.js";

export const someAction = ({ commit }) => {
  router.push("/welcome");
};

to import the router and then call router.push in our Vuex action method.

Conclusion

To navigate using Vue Router from Vuex actions, to import the router into our Vuex store and call push on it.