New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

vike-vue

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vike-vue

0.7.2
Source
npm

Version published: 8 months ago

Weekly downloads: 2K; decreased by-35.66%

Maintainers: 3

Weekly downloads

Created: 2 years ago

Source

`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. All hooks are cumulative, so you can add your own hooks without overriding the default ones.

vike-vue introduces the following new hooks:

onCreateApp(): Allows you to extend the Vue app, typically for registering a Vue plugin.
onAfterRenderHtml(): Called right after rendering the app on the server. Usually used for dehydration of state management libraries.
onBeforeRenderClient(): Called before mounting the app on the client. Usually used for hydration of state management libraries.
bodyHtmlStart(): Called on the server and client. Allows you to add content at the start of the <body> tag.
bodyHtmlEnd(): Called on the server and client. Defaults to <div id="teleported"></div>. Allows you to add content at the end of the <body> tag.

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.

Components

vike-vue introduces the following new components:

ClientOnly: Wrapper to render and load a component only on the client-side.

Teleports

Teleports work out of the box with vike-vue when using <Teleport to="teleported"> as we inject an empty div with id="teleported" by default. You can add more targets by using a custom bodyHtmlEnd() hook.

FAQs

What is vike-vue?

Is vike-vue popular?

Is vike-vue well maintained?

Package last updated on 06 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install