vike-vue
We recommend using vike-vue
which integrates Vue in a full-fledged manner.
You can use vike.dev/new to scaffold a Vike app that uses
vike-vue
.
You can also integrate Vue yourself if you want full control over the Vue integration.
Custom integration
Instead of using vike-vue
, you can implement your own Vue integration, for full control over the integration of Vue and Vue libraries.
🧠Custom integrations can be complex and we generally recommend usingvike-vue
instead.
👉 That said, a custom integration can make sense in following scenarios:
- You are building an app with a simple architecture.
For example,
https://vike.dev
has a simple architecture and uses a custom integration.You can read the source code of
vike-vue
(it's small!) and check whether you'll need most of the code or not — if you do then it most likely makes sense to usevike-vue
.- You have already tried
vike-vue
but ran into a fundamental blocker with it.We recommend starting a discussion with a
vike-vue
maintainer.- You are curious and want to deepen your Vue knowledge.
See also: Vike extension VS custom integration.
You can use vike.dev/new/core to scaffold a Vike app showcasing a manual Vlue integration.
Official examples:
- /packages/create-vike-core/boilerplate-vue-ts - Classic integration, using Client Routing.
- /examples/vue-minimal - Minimalistic integration, using Server Routing.
vike-vue
source code - Full-fledged integration.
For more official examples, see GitHub >
vikejs/vike
>examples/
.
Community examples:
- 2023.12 GitHub >
luisfloat/vike-island-example
- Islands Architecture implementation, mixing React and Vue. - 2022.08 GitHub >
AaronBeaudoin/vite-plugin-ssr-example
- Vue integration supporting all render modes (SSR, SPA, and HTML-only).
For more community examples, see integration guides such as Vue Query.