Hot Module Replacement

What is Hot Module Replacement?

Hot Module Replacement (or HMR) is a feature that allows you to update your application code without having to refresh the page. It is a very useful feature for development since it allows you to see the changes you make to your code in real time. It is also very useful for debugging since you can see the changes you make to your code without losing the state of your application.

HMR in Vulmix

Vulmix comes with HMR enabled by default. You can see it in action by running the dev command:

# NPM
npm run dev

# Yarn
yarn dev

# Bun
bun dev

As an example, let's create a new component called ComponentOne.vue in the components folder with the following content:

<template>
  <h1>I'm the ComponentOne!</h1>
</template>

Now, create another component called ComponentTwo.vue, this time with a counter, in the same folder with the following content:

<template>
  <div>
    <h1>I'm the ComponentTwo!</h1>
    <p>
      Counter: {{ counter }}
      <button @click="counter++">Increment</button>
    </p>
  </div>
</template>

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

  const counter = ref(0)
</script>

Now, let's use both components in the app.vue file:

<template>
  <div>
    <ComponentOne />
    <ComponentTwo />
  </div>
</template>

You should see the following result:

Now, let's increment the value and make some changes to the ComponentOne.vue. Notice how the counter value of the ComponentTwo.vue component is not reset and the changes to the ComponentOne.vue are reflected in real time: