`+onCreateApp()` hook

Environment: client, server

Global

Cumulative

Provided by: vike-vue

You need vike-vue to be able to use onCreateApp().

The onCreateApp() hook is called whenever vike-vue creates a new Vue app instance, giving you the opportunity to access app, for example to register a Vue plugin.

// pages/+onCreateApp.js
// Environment: server & client
 
export { onCreateApp }
 
import SomeVuePlugin from 'some-vue-plugin'
 
function onCreateApp(pageContext) {
  if (pageContext.isRenderingHead) {
    // Don't add the plugin when rendering <head> (see Lifecycle)
    return
  }
  const app = pageContext.app
  app.use(SomeVuePlugin)
}

// pages/+onCreateApp.ts
// Environment: server & client
 
export { onCreateApp }
 
import SomeVuePlugin from 'some-vue-plugin'
import type { PageContext } from 'vike/types'
 
function onCreateApp(pageContext: PageContext) {
  if (pageContext.isRenderingHead) {
    // Don't add the plugin when rendering <head> (see Lifecycle)
    return
  }
  const app = pageContext.app!
  app.use(SomeVuePlugin)
}

Lifecycle

The onCreateApp() hook is called when vike-vue creates a new app instance upon SSR, hydration, and client-side navigation.

Upon SSR, vike-vue creates two app instances: one for rendering the +Page.vue component, and a second one for rendering the +Head.vue component.

You can use pageContext.isRenderingHead for applying your onCreateApp() logic only for rendering the +Page.vue component. (See example above.)

In other words:

Upon the first page the user visits, there are three onCreateApp() calls: two on the server-side (one for +Page.vue and a second one for +Head.vue), and one on the client-side (for hydration).
Upon client-side navigation, there is only one onCreateApp() call (on the client-side) for rendering the next page.

If your page isn't SSR'd then, upon rendering the first page, there are only two onCreateApp() calls: one on the server-side (for +Head.vue), and another one on the client-side (for rendering).

Examples

See vike-vue > /examples/full/pages/+onCreateApp.ts

+onCreateApp() hook

Lifecycle

Examples

See also

`+onCreateApp()` hook