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 ​

• Node.js v18 — you should upgrade to v20 LTS to benefit from massive performance improvements!
• We recommend PNPM as a package manager.

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.

vue-base ​

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.

Download ​

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

Dependencies ​

• fastify as the Node.js server.

• vite for the client application bundling.

• @fastify/vite for Vite integration in Fastify.

• @fastify/vue for the Vue application shell.

  • And its peer dependencies:
    • devalue
    • unihead
    • vue
    • vue-router

• @vitejs/plugin-vue for Vue support in Vite.

• @fastify/one-line-logger for better logging in development.

• tailwind and postcss-nestingfor Tailwind and CSS Nesting support.

• postcss-preset-env for access to all latest CSS features.

vue-kitchensink ​

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

Download ​

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

Dependencies ​

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.