How to Implement Force Unmount in Vue 3 When Deactivated

Question

How to Implement Force Unmount in Vue 3 When Deactivated

I've developed a VUE app that makes use of the keep-alive method in the router. There are multiple pages that should only be loaded once, but certain specific pages need to be reloaded every time they are activated.

<template>
  <router-view v-slot="{ Component }">
    <keep-alive max="5">
      <component :is="Component" />
    </keep-alive>
  </router-view>
<template>

My goal is to remove a page-component from the keep-alive cache when it is deactivated.

/* This component has been loaded */
export default {
  setup() {
    const state = ref({});
    /* Initialize and load data...*/
   
    onDeactivated(() => {
     // Need to unmount this component ???
    });
    
    return { state };
  },
  components: {},
};

In your opinion, what would be the best practice for achieving this?

javascript vue.js vue-router vuejs3 vue-router4

Answer 1

Answer №1

Custom Conditional `keep-alive`

If you want to control when components are added or removed from the keep-alive cache, you can use a reactive set and bind it to the exclude property of keep-alive. Here's how to do it:

// App.vue
import { provide, reactive, computed } from 'vue'

export default {
  setup() {
    const keepAliveExcludes = reactive(new Set())

    provide('keepAliveExcludes', {
      add: name => keepAliveExcludes.add(name),
      remove: name => keepAliveExcludes.delete(name),
    })

    return {
      keepAliveExcludes: computed(() => Array.from(keepAliveExcludes))
    }
  }
}

In your template, bind keepAliveExcludes to the <keep-alive>.exclude property:

<template>
  <router-view>
    <keep-alive :exclude="keepAliveExcludes">
      ...
    </keep-alive>
  </router-view>
</template>

In the child route component, use inject to access the keepAliveExcludes and manage its entries based on user interactions:

<template>
  <h1>About</h1>
  <div>
    <label>Keep Alive
      <input type="checkbox" v-model="keepAlive">
    </label>
  </div>
</template>

<script>
import { ref, inject, watchEffect } from 'vue'

export default {
  name: 'About',
  setup() {
    const { add: addKeepAliveExclude, remove: removeKeepAliveExclude } = inject('keepAliveExcludes', {})

    const keepAlive = ref(true)
   
    watchEffect(() => {
      if (keepAlive.value) {
        removeKeepAliveExclude?.('About')
      } else {
        addKeepAliveExclude?.('About')
      }
    })

    return { keepAlive }
  },
}
</script>

Check out the demo here

Forced Exclusion in `keep-alive`

If you always want a component to be excluded from the keep-alive cache, you can simply specify the component name without using the dynamic approach above.

In your template, directly list the component name in the <keep-alive>.exclude property:

<template>
  <router-view>
    <keep-alive exclude="About">
      ...
    </keep-alive>
  </router-view>
</template>

View the demonstration here

Answer 2

Custom Conditional `keep-alive`

If you want to control when components are added or removed from the keep-alive cache, you can use a reactive set and bind it to the exclude property of keep-alive. Here's how to do it:

// App.vue
import { provide, reactive, computed } from 'vue'

export default {
  setup() {
    const keepAliveExcludes = reactive(new Set())

    provide('keepAliveExcludes', {
      add: name => keepAliveExcludes.add(name),
      remove: name => keepAliveExcludes.delete(name),
    })

    return {
      keepAliveExcludes: computed(() => Array.from(keepAliveExcludes))
    }
  }
}

In your template, bind keepAliveExcludes to the <keep-alive>.exclude property:

<template>
  <router-view>
    <keep-alive :exclude="keepAliveExcludes">
      ...
    </keep-alive>
  </router-view>
</template>

In the child route component, use inject to access the keepAliveExcludes and manage its entries based on user interactions:

<template>
  <h1>About</h1>
  <div>
    <label>Keep Alive
      <input type="checkbox" v-model="keepAlive">
    </label>
  </div>
</template>

<script>
import { ref, inject, watchEffect } from 'vue'

export default {
  name: 'About',
  setup() {
    const { add: addKeepAliveExclude, remove: removeKeepAliveExclude } = inject('keepAliveExcludes', {})

    const keepAlive = ref(true)
   
    watchEffect(() => {
      if (keepAlive.value) {
        removeKeepAliveExclude?.('About')
      } else {
        addKeepAliveExclude?.('About')
      }
    })

    return { keepAlive }
  },
}
</script>

Check out the demo here

Forced Exclusion in `keep-alive`

If you always want a component to be excluded from the keep-alive cache, you can simply specify the component name without using the dynamic approach above.

In your template, directly list the component name in the <keep-alive>.exclude property:

<template>
  <router-view>
    <keep-alive exclude="About">
      ...
    </keep-alive>
  </router-view>
</template>

View the demonstration here

Answer 3

Answer №2

Check out the fantastic response from @tony19, although it seems to be encountering some issues due to a potential bug in VUE (I'm currently using version 3.2.6).

The problem arises when a component is excluded from being kept alive after it's initiated, and then the maximum number of keep-alive components is reached. VUE attempts to remove the non-existent excluded component, causing an error that halts the application. More details on this error can be found below.

To resolve this issue, I decided to build upon Tony19's excellent solution. Instead of excluding the component after it has loaded, I set up rules in the router just before loading the component.

const routes = [
  /* ... */
  {
    path: "/about",
    name: "AboutPage",
    meta: { excludeKeepAlive: true },
    component: () => import('./../components/AboutPage.vue'),
  }
  /* ... */
];

Here is how this approach was implemented in the main APP:

/* Main app logic goes here */
export default {
  setup() {
    /* ... */
    const keepAliveExcludes = reactive(new Set());

    cont keepAliveExcluder= {
      add: name => keepAliveExcludes.add(name),
      remove: name => keepAliveExcludes.delete(name),
    }
   
    router.beforeEach((to, from, next) => {    
      if(to.meta?.excludeKeepAlive===true){      
        keepAliveExcluder.add(to.name);
      } 
      next();
     });
    /* ... */
   return {
      keepAliveExcludes: computed(() => Array.from(keepAliveExcludes))
    }
   }
}

Further details on the error (potentially a bug)

The error is triggered at line 2057 of runtime-core.esm-bundler.js

Uncaught (in promise) TypeError: Cannot read property 'type' of undefined

This error occurs because VUE is unable to locate the dynamically excluded component.

https://i.sstatic.net/4e7SN.png

Answer 4

Check out the fantastic response from @tony19, although it seems to be encountering some issues due to a potential bug in VUE (I'm currently using version 3.2.6).

The problem arises when a component is excluded from being kept alive after it's initiated, and then the maximum number of keep-alive components is reached. VUE attempts to remove the non-existent excluded component, causing an error that halts the application. More details on this error can be found below.

To resolve this issue, I decided to build upon Tony19's excellent solution. Instead of excluding the component after it has loaded, I set up rules in the router just before loading the component.

const routes = [
  /* ... */
  {
    path: "/about",
    name: "AboutPage",
    meta: { excludeKeepAlive: true },
    component: () => import('./../components/AboutPage.vue'),
  }
  /* ... */
];

Here is how this approach was implemented in the main APP:

/* Main app logic goes here */
export default {
  setup() {
    /* ... */
    const keepAliveExcludes = reactive(new Set());

    cont keepAliveExcluder= {
      add: name => keepAliveExcludes.add(name),
      remove: name => keepAliveExcludes.delete(name),
    }
   
    router.beforeEach((to, from, next) => {    
      if(to.meta?.excludeKeepAlive===true){      
        keepAliveExcluder.add(to.name);
      } 
      next();
     });
    /* ... */
   return {
      keepAliveExcludes: computed(() => Array.from(keepAliveExcludes))
    }
   }
}

Further details on the error (potentially a bug)

The error is triggered at line 2057 of runtime-core.esm-bundler.js

Uncaught (in promise) TypeError: Cannot read property 'type' of undefined

This error occurs because VUE is unable to locate the dynamically excluded component.

https://i.sstatic.net/4e7SN.png

How to Implement Force Unmount in Vue 3 When Deactivated

Answer №1

Custom Conditional `keep-alive`

Forced Exclusion in `keep-alive`

Answer №2

Similar questions

An element in defaultProps deemed as nonexistent

The image source is visible in Vue.js, but unfortunately, my picture is not showing up

Enhancing Vue.js functionality with v-model for seamless global data access

Creating a dynamic anchor scrolling effect within a dropdown select menu

mention a particular anchor by clicking on it to refresh the webpage

Accessing User Input Data with JQuery

Guidelines for integrating Pinia seamlessly into Vue 3 components

Struggling to get a shader up and running on three.js using shaderfrom

Setting a variable in a v-tab using Vuetify now only takes 2 easy clicks!

Executing PHP function through AJAX

Updating records in Laravel 6 with Vue.js from a child component utilizing vue-router and axios

When a new element is added to the DOM, bind a click event to it that will trigger another

Submitting an HTML form to trigger a PHP function through AJAX

Displaying information based on selection in AngularJSIn this tutorial

What is the best way to retrieve all the values of a specific field from a store?

Accessing a hyperlink in an alternative browser

A guide on implementing the stencilFunc method in Three.js

Can the Route be modified in Next.js?

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

Ways to identify input that has been altered dynamically

How to Implement Force Unmount in Vue 3 When Deactivated

Answer №1

Custom Conditional keep-alive

Forced Exclusion in keep-alive

Answer №2

Similar questions

An element in defaultProps deemed as nonexistent

The image source is visible in Vue.js, but unfortunately, my picture is not showing up

Enhancing Vue.js functionality with v-model for seamless global data access

Creating a dynamic anchor scrolling effect within a dropdown select menu

mention a particular anchor by clicking on it to refresh the webpage

Accessing User Input Data with JQuery

Guidelines for integrating Pinia seamlessly into Vue 3 components

Struggling to get a shader up and running on three.js using shaderfrom

Setting a variable in a v-tab using Vuetify now only takes 2 easy clicks!

Executing PHP function through AJAX

Updating records in Laravel 6 with Vue.js from a child component utilizing vue-router and axios

When a new element is added to the DOM, bind a click event to it that will trigger another

Submitting an HTML form to trigger a PHP function through AJAX

Displaying information based on selection in AngularJSIn this tutorial

What is the best way to retrieve all the values of a specific field from a store?

Accessing a hyperlink in an alternative browser

A guide on implementing the stencilFunc method in Three.js

Can the Route be modified in Next.js?

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

Ways to identify input that has been altered dynamically

Custom Conditional `keep-alive`

Forced Exclusion in `keep-alive`