`+vue`

Environment: client, server

Per-page

Cumulative

vike-vue setting

You need vike-vue to be able to use the +vue setting.

Vue integration options.

// pages/+vue.js
// Environment: server & client
 
export default {
  keepAlive: true
}

// pages/+vue.ts
// Environment: server & client
 
import type { Config } from 'vike/types'
 
export default {
  keepAlive: true
} satisfies Config['vue']

JavaScript

TypeScript

You can access pageContext:

// pages/+vue.js
 
export const vue = (pageContext) => {
  return {
    keepAlive: !pageContext.urlPathname.startsWith('/admin')
  }
}

// pages/+vue.ts
 
import type { Config, PageContext } from 'vike/types'
 
export const vue: Config['vue'] = (pageContext: PageContext) => {
  return {
    keepAlive: !pageContext.urlPathname.startsWith('/admin')
  }
}

JavaScript

TypeScript

`keepAlive`

keepAlive?: boolean | KeepAliveProps // default: false

Whether to wrap your Page component with Vue's built-in <KeepAlive> component, preserving page component instances — and thus their state — across client-side navigation.

// pages/+vue.js
 
export default {
  keepAlive: true
}

// pages/+vue.ts
 
import type { Config } from 'vike/types'
 
export default {
  keepAlive: true
} satisfies Config['vue']

JavaScript

TypeScript

Instead of true, you can provide <KeepAlive> props for controlling which page components are cached:

// pages/+vue.js
 
export default {
  // Cache at most 10 page instances, and never cache the component named 'HugePage'
  keepAlive: { max: 10, exclude: ['HugePage'] } 
}

// pages/+vue.ts
 
import type { Config } from 'vike/types'
 
export default {
  // Cache at most 10 page instances, and never cache the component named 'HugePage'
  keepAlive: { max: 10, exclude: ['HugePage'] } 
} satisfies Config['vue']

JavaScript

TypeScript

The include/exclude props match against the name of your +Page.vue components.

You can use Vue's onActivated() and onDeactivated() lifecycle hooks inside your page components to react to the page being shown/hidden.

+vue

keepAlive

See also

`+vue`

`keepAlive`