Category: Vue

Sometimes, we want to change the port number of the dev server of the Vue-CLI project.

In this article, we’ll look at how to change the port number of the dev server of the Vue-CLI project.

Change the Port Number in Vue-CLI Project

We can change the port number of the dev server runs on by adding the port property into vue.config.js in the root folder.

For instance, we can write:

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

to add the port property and set it to 8080.

Now the Vue-CLI dev server will run on port 8080.

We can also change the scripts.serve property in package.json to add the port to the serve command.

For instance, we can write:

vue-cli-service serve --port 8080

to set the port of the Vue-CLI dev server to 8080.

Conclusion

We can change the port number of the dev server runs on by adding the port property into vue.config.js in the root folder.

Sometimes, we want to disable input conditionally in Vue.js.

In this article, we’ll look at how to disable input conditionally in Vue.js.

Disable Input Conditionally in Vue.js

We can disable input conditionally in Vue.js by passing in an expression into the disabled prop.

For instance, we can write:

<template>
  <div id="app">
    <button @click="disabled = !disabled">Toggle Enable</button>
    <input type="text" :disabled="disabled" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      disabled: false,
    };
  },
};
</script>

We have the data method which returns the disabled reactive property.

Next, we add a button that toggles the disabled reactive property between true and false when we click it.

Below that, we pass in the disabled reactive property as the value of the disabled reactive prop.

Now when we click the button, the input will become disabled and enabled.

Conclusion

We can disable input conditionally in Vue.js by passing in an expression into the disabled prop.

Sometimes, we want to call a method in our Vue.js component when we load the page.

In this article, we’ll look at how to call a method in our Vue.js component when we load the page.

Call a Vue.js Method on Page Load

We can call a Vue.js method on page load by calling it in the beforeMount component hook.

For instance, we can write:

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  methods: {
    getUnits() {
      //...
    },
  },
  beforeMount() {
    this.getUnits();
  },
};
</script>

to add the getUnits method into the methods property.

And we call this.getUnits in the beforeMount hook.

this.getUnits is the getUnits method in the methods object property.

We can also make a method run on page load by calling it in the created hook:

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  methods: {
    getUnits() {
      //...
    },
  },
  created() {
    this.getUnits();
  },
};
</script>

And we can do the same in the mounted hook:

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  methods: {
    getUnits() {
      //...
    },
  },
  mounted() {
    this.getUnits();
  },
};
</script>

Conclusion

We can call a Vue.js method on page load by calling it in the beforeMount component hook.

We can also make a method run on page load by calling it in the created hook.

And we can do the same in the mounted hook.

Sometimes, we want to use moment.js with Vue.js to make date calculations easier.

In this article, we’ll look at how to use moment.js with Vue.js to make date calculations easier.

Use Moment.js with Vue.js

We can use moment.js in our components by calling it in methods.

For instance, we can write:

<template>
  <div id="app">
    {{ moment().format("MMMM Do YYYY, h:mm:ss a") }}
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "App",
  methods: {
    moment() {
      return moment();
    },
  },
};
</script>

to add the moment method that returns the return result of the moment function.

Then we call it in our template to show today’s date.

We can also add a filter to our Vue app that uses the moment function.

For instance, we can write:

<template>
  <div id="app">
    <span>{{ new Date() | moment }}</span>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "App",
  filters: {
    moment(date) {
      return moment(date).format("MMMM Do YYYY, h:mm:ss a");
    },
  },
};
</script>

to add the moment filter that takes the date and returns a date string formatted in the given format.

Conclusion

We can use moment.js in our components by calling it in methods.

Sometimes, we want to scroll to an element with Vue.js.

In this article, we’ll look at how to scroll to an element with Vue.js.

Scroll to an Element with Vue.js

We can scroll to an element with Vue.js by assigning a ref to the element we want to scroll to.

Then we can scroll to the element by calling the scrollIntoView method on the element assigned to the ref.

For instance, we can write:

<template>
  <div id="app">
    <button @click="scrollToElement">scroll to last</button>
    <p v-for="n of 100" :key="n" :ref="n === 100 ? 'last' : undefined">
      {{ n }}
    </p>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    scrollToElement() {
      const [el] = this.$refs.last;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>

We have the scroll to last button that calls scrollToElement .

Then we have some p element with the last ref being assigned to the last p element.

In the scrollToElement method, we get the element assigned to the last ref with this.$refs.last via destructuring.

Then we call el.scrollIntoView with an object that has the behavior property to change the scroll behavior.

Conclusion

We can scroll to an element with Vue.js by assigning a ref to the element we want to scroll to.

Then we can scroll to the element by calling the scrollIntoView method on the element assigned to the ref.