Skip to content

@fastify/vue@1.0.0

Choose a tag to compare

View all tags
@galvez galvez released this 04 Apr 22:17
vue-v1.0.0
eee37d6

This release accompanies @fastify/vite@8.0.0, which it relies upon.

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

Warning

BREAKING CHANGE

Previously, @fastify/vue used /: as the prefix for its smart imports (virtual modules). This releases adopts the $app/ prefix adhering to the convention used by SvelteKit. With that, /: is effectively deprecated in the name of consistency.

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 $app/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('$app/routes.js')),  
  create: import('$app/create.js'),
  context: import('$app/context.js'),
}

The new $app/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 $app/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 $app/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 $app/create.js and $app/mount.js virtual modules, respectively.

Support for wildcard routes

Previously you could use dynamic parameters by naming a page [slug].vue (where slug is the name of your parameter). But this would only match one path segment e.g. /product-category/horses but not /product-category/animals/horses. With the new support for wildcard routes you can name your page [slug+].vue and it will catch /product-category/*. This also means that you can place a wildcard file like [slug+].vue in your root and have it dynamically render pages from your favorite headless CMS tool.

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.

Assets 2
Loading