Infinite scrolling is something that we’ve to add often into our Vue 3 app.

In this article, we’ll look at how to add infinite scrolling to a Vue 3 app with the Intersection Observer API.

Add Infinite Scrolling with the Intersection Observer API

The Intersection API lets us add infinite scrolling easily in our Vue 3 app.

To do this, we assign a ref to the last element and watch when that element is displayed on the screen.

Then when the array changes, we reassign the ref to the last element that’s added then.

For instance, we can write:

<template>
  <div
    v-for="(a, i) of…

Sometimes, we may want to check if a string is a date string with JavaScript.

In this article, we’ll look at how to check if a string is a date string with JavaScript.

Using the Date.parse() Method

One way to check if a string is date string with JavaScript is to use the Date.parse method.

To do this, we write:

console.log(Date.parse('2020-01-01'))
console.log(Date.parse('abc'))

Date.parse returns a timestamp in milliseconds if the string is a valid date.

Otherwise, it returns NaN .

So the first console log will log 1577836800000 and the 2nd one will log NaN .

Using moment.js

Another way to check if a date is…

Sometimes we want to add a menu with the active menu item highlighted in our React app.

In this article, we’ll look at how to add a menu with active items highlighting with React.

Add a Menu with Active Item Highlighting

To add a menu with the active item highlighting in our React app, we can listen to the mouseenter and mouseleave events.

We add the highlight to the item that’s hovered over when the mouseenter event is emitted.

And when the mouseleave event is emitted, we clear the highlights on all items.

We set the onMouseEnter prop to the mouseenter event handler and set the onMouseLeave…

MobX is a simple state management solution for JavaScript apps.

In this article, we’ll look at how to use MobX 6 to add state management into our JavaScript apps.

Do Things When an Observable Meets a Given Condition

We can use the when function provided by MobX 6 to do something when the store’s state is in a given condition.

For instance, we can write:

import { makeObservable, observable, computed, action, when } from "mobx";class Count {
  count = 0;
  get doubleCount() {
    return this.count * 2;
  }
  constructor(count) {
    makeObservable(this, {
      count: observable,
      doubleCount: computed,
      increment: action
    });
    this.count = count;
  }  increment() {
    this.count++;
  }
}…

Sometimes, we may want to disable inputs conditionally in our Vue 3 apps.

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

Disable Input Conditionally in Vue.js 3

We can disable inputs conditionally with Vue 3 by setting the disabled prop to the condition when we want to disable the input.

For instance, we can write:

<template>
  <input :disabled="disabled" />
  <button @click="disabled = !disabled">toggle disable</button>
</template><script>
export default {
  name: "App",
  data() {
    return {
      disabled: false,
    };
  },
};
</script>

We have the input with the disabled prop set to the disabled reactive property.

Below that, we have…

Sometimes, we may want to call a Vue 3 component method from outside the component.

In this article, we’ll look at how to call a Vue 3 component method from outside the component.

Assign a Ref to the Component and Call the Method From it

We can assign a ref to a component and get the method from the ref object and call it.

For instance, we can write:

App.vue

<template>
  <HelloWorld ref="helloWorld" />
  <button @click="greet">greet</button>
</template><script>
import HelloWorld from "./components/HelloWorld";export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    greet() {
      this.$refs.helloWorld.greet("jane");
    },
  },
};
</script>

components/HelloWorld.vue

<template>
  <div>hello world</div>
</template><script>
export default {
  methods: {…

Sometimes, we may want to set a DOM element as the first child element.

In this article, we’ll look at ways to set a DOM element as the first child.

Using the prepend Method

In modern browsers, an HTML element object comes with the prepend method to let us prepend an element as the first child.

For instance, if we have the following HTML:

<div>
  <p>
    bar
  </p>
  <p>
    baz
  </p>
</div>

Then we can write the following JavaScript to prepend an element as the first child of the div:

const div = document.querySelector('div')
const newChild = document.createElement('p')
newChild.textContent = 'foo'
div.prepend(newChild)

We get…

Sometimes, we want to map our components to paths that don’t have a hash in front of it in our Vue 3 app that uses Vue Router 4.

In this article, we’ll look at how to remove the hash from the URL path with Vue Router 4.

Remove the Hash from the URL with Vue Router 4

We can remove the hash from the URLs with Vue Router 4 by calling the createWebHistory method.

For instance, we can write:

main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Page1 from "./views/Page1";
import Page2 from "./views/Page2";
import Page3 from "./views/Page3";const…