🔍Search
📚 Docs Menu
🌱 Get Started

vike-vue

The vike-vue package is a Vike extension that integrates Vue in a full-fledged manner, providing a DX like a regular frontend framework such as Nuxt.

Version history: CHANGELOG.md
Examples: Bati and examples/
Source code: GitHub > vikejs/vike-vue

The documentation for using vike-vue can be found throughout this website (vike.dev).

The guides, such as Guides > Data Fetching, assume you're using Vike with vike-react, vike-vue, or vike-solid. If you aren't then see the sections Without vike-{react,vue,solid} such as API > useData() > Without vike-{react,vue,solid}.

You can integrate Vue yourself instead of using vike-vue, see Vue > Custom integration.

Scaffold new vike-vue app

Use Bati for creating new apps.

If you select Vue then Bati scaffolds a Vike + vike-vue app.

Add vike-vue to existing Vike app

To add vike-vue to an existing Vike app: install the vike-vue npm package (e.g. $ npm install vike-vue) then extend your existing +config.js file (or create one) with vike-vue:

// /pages/+config.js
 
import vikeVue from 'vike-vue/config'
 
export default {
  // ...
  extends: [vikeVue] 
}

You can then use new settings introduced by vike-vue:

// /pages/+config.js
 
import vikeVue from 'vike-vue/config'
 
export default {
  // ...
 
  // Setting to toggle SSR
  ssr: false, 
 
  extends: [vikeVue]
}

Under the hood

The vike-vue extension is only around 1k lines of code. It's simple, readable, and highly polished.

Reading the source code of vike-vue is very much an option for understanding, debugging, and/or contributing.

Contributions are welcome! See CONTRIBUTING.md to get started.

Essentially vike-vue does this:

It implements the following:

For a better overview, see the following lists instead. (They also include all settings and hooks created by vike-vue.)

See also