fastify-dx-vue

• Introduction
• Quick Start
• Package Scripts
• Basic Setup
• Project Structure
• Rendering Modes
• Routing Configuration
• Data Prefetching
• Route Layouts
• Route Context
• Route Enter Event
• Virtual Modules

Introduction

Fastify DX for Vue is a renderer adapter for fastify-vite.

It lets you run and SSR (server-side render) Vue 3 applications built with Vite on Fastify, with a minimal and transparent server-first approach — everything starts with server.js, your actual Fastify server.

It also provides a set of built-in utilities for ease of development and managing a universal JavaScript context (SSR to CSR), very much like Nuxt.js, Next.js and Remix. Both Fastify DX for Vue and Fastify DX for React implement the URMA specification and have almost the same API, with only minimal differences due to specific framework APIs or idioms.

It is a fast, lightweight alternative to Nuxt.js packed with Developer Experience features.

It has an extremely small core (~1k LOC total) and is built on top of Fastify, Vite and Vue Router.

See the release notes for the 0.0.1 alpha release.

At this stage this project is mostly a one-man show, who's devoting all his free time to its completion. Contributions are extremely welcome, as well as bug reports for any issues you may find.

In this first alpha release it's still missing a test suite. The same is true for fastify-vite.

It'll move into beta status when test suites are added to both packages.

Quick Start

Ensure you have Node v16+.

Make a copy of starters/vue. If you have degit, run the following from a new directory:

degit fastify/fastify-dx/starters/vue

If you're starting a project from scratch, you'll need these packages installed.

npm i fastify fastify-vite fastify-dx-vue -P
npm i @vitejs/plugin-vue -D

Run npm install.

Run npm run dev.

Visit http://localhost:3000/.

What's Included

That will get you a starter template with:

• A minimal Fastify server.
• Some dummy API routes.
• A pages/ folder with some demo routes.
• All configuration files.

It also includes some opinionated essentials:

• PostCSS Preset Env by Jonathan Neal, which enables several modern CSS features, such as CSS Nesting.

• UnoCSS by Anthony Fu, which supports all Tailwind utilities and many other goodies through its default preset.

• VueUse by Anthony Fu, which provides an extremely rich set of utilities — they're not included in the project build unless explicitly imported and used.

Package Scripts

npm run dev boots the development server.

npm run build creates the production bundle.

npm run serve serves the production bundle.

Meta

Created by Jonas Galvez, Engineering Manager and Open Sourcerer at NearForm.

Sponsors

Also Duc-Thien Bui and Tom Preston-Werner via GitHub Sponsors. Thank you!