Skip to content

Getting Started

@fastify/vue is @fastify/vite's core renderer for Vue. It is accompanied by @fastify/vue/plugin, a Vite plugin that complements the renderer package.

It implements all of the features specified in Core Renderers, including automated routing, universal data fetching and head management. It's meant to be a lightweight Fastify-flavored replacement to Nuxt.js and other full blown SSR Vue frameworks. It is Fastify-first in the sense that your Fastify server is responsible for setting everything up via @fastify/vite.

Below is an overview of all individual documentation topics and the order in which it makes the most sense to read them.

  • Project Structure covers the structure of a @fastify/vue project, configuration, special folders and others conventions employed.
  • Router Setup covers how route modules get registered as actual routes, both on the server and the client.
  • Route Modules covers what makes up route modules, what special exports they have and how they work.
  • Route Context covers the universal route context initialization module and the useRouteContext() hook, available to all route modules and route layouts.
  • Route Layouts covers route layout modules.
  • Rendering Modes covers all different route module rendering modes.

Runtime requirements

Support for other JavaScript environments with HTTP support based on the Fetch and Service Worker standards is coming when fastify-edge is finished.

Starter templates

Since @fastify/vite is not a framework but rather a Fastify plugin, it can't run your application on its own, you need to have your Fastify server, a Vite configuration file, and the basic file structure that make up your frontend.


The vue-base starter template includes just about the minimum set of files to get your @fastify/vue application going.

It contains no embedded examples other than pages/index.vue, and no additional dependencies.


We recommend using giget to download straight from GitHub.

giget gh:fastify/fastify-vite/starters/vue-base#dev your-app
giget gh:fastify/fastify-vite/starters/vue-base#dev your-app



The vue-kitchensink starter template includes all of vue-base plus a sample context.js initialization file and same additional example routes under pages/.


We recommend using giget to download straight from GitHub.

giget gh:fastify/fastify-vite/starters/vue-kitchensink#dev your-app
giget gh:fastify/fastify-vite/starters/vue-kitchensink#dev your-app


All dependencies from vue-base.

Known limitations

  • It's currently impossible to run multiple Vite development server middleware in your Fastify server, which means @fastify/vite can only be registered once. Configuration for this is somewhat tricky and there isn't documentation on how to do it. Once #108 is completed and merged, it will open the path to have a Vite development server factory that can create instances on-demand, but that approach still remains to be tested.

    If you're looking into a microfrontend setup, consider this approach.

  • @fastify/vue currently has no support for producing a fully functional static bundle, that is, even when you use clientOnly, you'd need to be running the Fastify server integrated with the @fastify/vite renderer. SPA support is planned for the next major release, see the project roadmap.

  • There's not hot reload for the context.js file. This should be addressed in the next major release, see the project roadmap.

Released under the MIT License.