Vike-vue NPM | npm.io

`vike-vue`

Vue integration for Vike, see vike.dev/vue.

Introduction

UI framework Vike extensions like vike-vue:

implement Vike Core hooks (e.g. onRenderHtml()) on your behalf,
set Vike Core settings on your behalf,
introduce new hooks for you to implement if needed,
introduce new settings for you to set if needed,
introduce new components and component hooks.

Scaffold new app

Use Bati to scaffold a Vike app using vike-vue.

Add to existing app

To add vike-vue to an existing Vike app:

Install the vike-vue npm package in your project:

npm install vike-vue

Extend your existing Vike config files with vike-vue:

 // /pages/+config.js

+import vikeVue from 'vike-vue/config'
+
 export default {
   // Existing Vike Core settings
   // ...
+
+  // New setting introduced by vike-vue:
+  title: 'My Vike + Vue App',
+
+  extends: vikeVue
 }

Hooks

vike-vue implements the onRenderHtml() and onRenderClient() hooks on your behalf, which are essentially the glue code between Vike and Vue.

vike-vue introduces the following new hooks:

onCreateApp(): Allows you to extend the Vue app, typically for registering a Vue plugin.
onAfterRenderSSRApp(): Called right after rendering the app on the server. Usually used for dehydration of state management libraries.
onBeforeMountApp(): Called before mounting the app on the client. Usually used for hydration of state management libraries.

Settings

vike-vue sets the following Vike Core settings on your behalf:

clientRouting=true: Enable Client Routing.
hydrationCanBeAborted=true: Vue allows the hydration to be aborted.

vike-vue introduces the following new settings:

Head: Component Component to be rendered inside the <head> tag.
title: string <title>...</title> tag.
favicon: string <link rel="icon" href="..." /> attribute.
lang: string <html lang="..."> attribute.
ssr: boolean Enable/disable Server-Side Rendering (SSR).
stream: boolean Enable/disable HTML streaming.
Layout: Component Wrapper for your Page component.

Component hooks

vike-vue introduces the following new component hooks:

useData(): Access the data that is returned by a data() hook from any component.
usePageContext(): Access the pageContext object from any component.