Skip to content

@fastify/vue@1.0.0-alpha.5
Compare
Choose a tag to compare
@galvez galvez released this 16 Oct 06:07
· 10 commits to dev since this release
vue-v1.0.0-alpha.5
c3f23c6

The first (usable) alpha release of @fastify/vue@1.0 🎉

This release has much to thank for to the couple dozen brave souls actually using @fastify/vue.

Their feedback, ideas and support have been greater than I could ever hope for. This project has come a long way!

Most features in this release have Developer Experience in mind.

Tip

If you're new to @fastify/vue

Make sure to check out Matteo Collina's excellent write-up.

This is not a metaframework, but it might very well be mistaken as one.

The reason it can't really be considered a metaframework is because it relies purely on Fastify, Vite and @fastify/vite. Everything uses @fastify/vite hooks and the application shell is completely transparent and ejectable.

New $app/ smart import prefix

Previously, @fastify/vue used /: as the prefix for its smart imports (virtual modules). This releases also adopts the $app/ prefix adhering to the convention used by SvelteKit. It's mostly an aesthetic addition, with /: remaining available for those who prefer it.

New $app/hooks virtual module

A new $app/hooks virtual module has been added providing convenience wrappers to useRouteContext():

Screenshot 2024-10-14 at 08 47 06

Automated $app/stores

One of my favorite things about @fastify/vue has always been the context.js file. A single file that can define your application's global state as a simple reactive() object, as well as actions that operate on it. In retrospect this file should have been named store.js — the main reason for it to be named context.js is that its exports are automatically collected and made available via useRouteContext(), and if it has a function as its default export, it is executed exactly once both on the server and on the client for every request, mimicking the functionality of Nuxt plugins.

This releases further improves the automation of global state and actions by introducing automated stores, automatically sliced off the main state object. For every property that is an object, @fastify/vue will make it available as an individual store including any methods defined in actions matching the property name.

Screenshot 2024-10-14 at 07 28 13

This dynamic $app/stores virtual module is compiled exactly once at build time.

See client/context.js and client/pages/using-store.vue from the new vue-kitchensink starter template.

Pregenerated preload tags for every route

@fastify/vue will now generate one individual SSR HTML template for each route module, containing pregenerated preload tags for assets loaded within the route module.

Screenshot 2024-10-16 at 01 44 23

This was inspired on the work of Jarle Friestad in vite-plugin-preload. Thanks Jarle!

Conditional client and server imports

Screenshot 2024-10-14 at 09 44 11

No more client/index.js!

This has been in my wishlist for a long time. The Vite project root is no longer required to have the index.js file (the clientModule), which has joined the list of available virtual modules (or smart imports as @fastify/vue calls them). In the vite build call to build the server bundle, just pass /:index.js as the entry point now.

If you're using your client module file to provide additional properties to the server, you can still keep it in your Vite project folder and it will be used. Take note however that its default definition has been updated to:

import { createRoutes } from '@fastify/vue/server'

export default { 
  routes: createRoutes(import('/:routes.js')),  
  create: import('/:create.js'),
  context: import('/:context.js'),
}

The new /:routes.js smart import is now simply the import.meta.glob() call for collecting route modules:

export default import.meta.glob('/pages/**/*.vue')

If you want to a different source directory for your route modules, just provide your own routes.js file. Note that this also eliminates the routing options that were previously available in @fastify/vue's Vite plugin.

New @fastify/vue/server module

Previously, the core createRoutes() function was defined in the /:routes.js smart import. Due to its significance in the setup, it is no longer encouraged to directly modify this function — unless you're contributing to the project of course! The @fastify/vue/server now contains the createRoutes() function, used directly from the /:index.js smart import as seen above.

New @fastify/vue/client module

Previously, the core useRouteContext() hook was made available via the /:core.js virtual module. Since it contains fundamental pieces of the setup, the /:core.js smart import ceased to exist and has moved to @fastify/vue/client at the library level.

The @fastify/vue/client module also provides createBeforeEachHandler() and hydrateRoutes().

These are used internally by the /:create.js and /:mount.js virtual modules, respectively.

Trying it out

Use the vue-base or vue-kitchensink starters as recommended by the documentation.

Miscellaneous

Many thanks to my employer Feature.fm for supporting my work on this project.

You can also support my work by preordering Happy Little Monoliths — an upcoming book covering the Fasstify-Vite stack.

Assets 2
Loading