+onCreateApp()
hook
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.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 twoapp
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 youronCreateApp()
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).
See also: API > Hooks > Lifecycle
Examples
See vike-vue
> /examples/full/pages/+onCreateApp.ts