How to Use keep-alive in Vue for Component Caching

In Vue, you use the <keep-alive> wrapper component to cache dynamic components and preserve their state when toggling. Wrap the components you want to cache inside <keep-alive> tags in your template to enable this behavior.

Syntax

The <keep-alive> component wraps dynamic components to cache them. Use it with component or router-view to preserve state when switching views.

• <keep-alive>: Vue built-in wrapper for caching.
• include and exclude props: Filter which components to cache by name.
• max prop: Limits number of cached components.

vue

<keep-alive include="MyComponent">
  <component :is="currentComponent" />
</keep-alive>

Example

This example shows two components toggled with buttons. Wrapping them in <keep-alive> preserves their state, so input values remain when switching.

vue

<template>
  <div>
    <button @click="current = 'CompA'">Show Component A</button>
    <button @click="current = 'CompB'">Show Component B</button>

    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

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

const current = ref('CompA')

const CompA = {
  name: 'CompA',
  template: `<div>
    <p>Component A</p>
    <input v-model="text" placeholder="Type here" />
    <p>Input: {{ text }}</p>
  </div>`,
  data() {
    return { text: '' }
  }
}

const CompB = {
  name: 'CompB',
  template: `<div>
    <p>Component B</p>
    <input v-model="text" placeholder="Type here" />
    <p>Input: {{ text }}</p>
  </div>`,
  data() {
    return { text: '' }
  }
}

const components = { CompA, CompB }

// Register components dynamically
const currentComponent = computed(() => components[current.value])
</script>

Output

Two buttons labeled 'Show Component A' and 'Show Component B'. Clicking each shows that component with an input box. Typed input stays when switching components.

Common Pitfalls

Common mistakes when using <keep-alive> include:

• Not wrapping dynamic components properly, so caching doesn't work.
• Forgetting to use component name attributes when using include or exclude filters.
• Expecting keep-alive to cache static components or elements (it only works with dynamic components).

vue

<!-- Wrong: no keep-alive, state resets -->
<component :is="current" />

<!-- Right: wrap with keep-alive to cache -->
<keep-alive>
  <component :is="current" />
</keep-alive>

Quick Reference

Prop	Description	Example
include	Cache only components with these names
exclude	Exclude components from caching by name
max	Limit max cached components count

Key Takeaways

Wrap dynamic components with to cache and preserve their state.

Use include and exclude props to control which components are cached by name.

Only dynamic components can be cached; static elements are not affected.

Remember to add a name to components when using include/exclude filters.

Without keep-alive, component state resets on each toggle or navigation.