Merge branch 'vue-support' of github.com:fastify/universify into vue-support

Author: galvez

docs/vue/basic-setup.md

@@ -35,15 +35,15 @@ await server.listen(3000)
 The starter template's [`vite.config.js`](https://github.com/fastify/fastify-dx/blob/main/starters/vue/vite.config.js) file:
 
 ```js
-import viteReact from '@vitejs/plugin-react'
+import viteVue from '@vitejs/plugin-vue'
 import viteVueFastifyDX from 'fastify-dx-vue/plugin'
 import unocss from 'unocss/vite'
 
 const path = fileURLToPath(import.meta.url)
 
 const root = join(dirname(path), 'client')
 const plugins = [
-  viteReact(), 
+  viteVue(), 
   viteVueFastifyDX(), 
   unocss()
 ]

docs/vue/project-structure.md

@@ -34,7 +34,7 @@ In this case, placing a file with the same name as the registered virtual module
 
 [virtual-modules]: https://github.com/fastify/fastify-dx/blob/main/docs/vue/virtual-modules.md
 
-The `server.js` file is your application entry point. It's the file that runs everything. It boots a Fastify server configured with [**fastify-vite**](https://github.com/fastify/fastify-vite) and **Fastify DX for React** as a renderer adapter to **fastify-vite**. 
+The `server.js` file is your application entry point. It's the file that runs everything. It boots a Fastify server configured with [**fastify-vite**](https://github.com/fastify/fastify-vite) and **Fastify DX for Vue** as a renderer adapter to **fastify-vite**. 
 
 The `client/index.js` file is your Vite server entry point, it's the file that provides your client bundle (which runs in the Vite-enriched environment) to the Node.js environment where Fastify runs. 
 
@@ -54,7 +54,7 @@ The `client/pages/` directory contains your route modules, whose paths are dynam
 
 [routing-config]: https://github.com/fastify/fastify-dx/blob/main/docs/vue/routing-config.md
 
-The `client/layouts/` directory contains your route layout modules, which can be associated to any route. By default, `layouts/default.jsx` is used, but if you don't need to do any modifications on that file, you can safely removed as it's provided by Fastify DX in that case. The starter template also comes with `layouts/auth.jsx`, to demonstrate a more advanced use of layouts.
+The `client/layouts/` directory contains your route layout modules, which can be associated to any route. By default, `layouts/default.vue` is used, but if you don't need to do any modifications on that file, you can safely removed as it's provided by Fastify DX in that case. The starter template also comes with `layouts/auth.vue`, to demonstrate a more advanced use of layouts.
 
 [routing-config]: https://github.com/fastify/fastify-dx/blob/main/docs/vue/routing-config.md
 

docs/vue/route-context.md

@@ -63,7 +63,7 @@ See the [full example](https://github.com/fastify/fastify-dx/blob/main/starters/
 
 This hook can be used in any Vue component to retrieve a reference to the current route context. It's modelled after the [URMA specification](https://github.com/fastify/fastify-dx/blob/main/URMA.md), with still some rough differences and missing properties in this **alpha release**.
 
-By default, It includes reference to `data` — which is automatically populated if you use the `getData()` function, and `state` which hold references to the global [`reactive()`] object.
+By default, It includes reference to `data` — which is automatically populated if you use the `getData()` function, and `state` which hold references to the global [`reactive()`](https://vuejs.org/api/reactivity-core.html#reactive) object.
 
 It automatically causes the component to be suspended if the `getData()`, `getMeta()` and `onEnter()` functions are asynchronous.
 
@@ -90,6 +90,6 @@ context.js default function export
          └─ Route module
 ```
 
-First the `default` function export from `context.js` (if present) is executed. This is where you can manually feed global server data into your application by populating the global Valtio state (the route context's `state` property, which is automatically hydrated on the client.
+First the `default` function export from `context.js` (if present) is executed. This is where you can manually feed global server data into your application by populating the global state (the route context's `state` property, which is automatically hydrated on the client.
 
 Then `getData()` runs — which populates the route context's `data` property, and is also automatically hydrated on the client. Then `getMeta()`, which populates the route context's `head` property. Then `onEnter()`, and finally your route component.

docs/vue/route-enter.md

@@ -12,16 +12,18 @@ It receives the [universal route context][route-context] as first parameter, so
 
 [route-context]: https://github.com/fastify/fastify-dx/blob/main/docs/vue/route-context.md
 
-```jsx
+```html
+<template>
+  <p>No pre-rendered HTML sent to the browser.</p>
+</template>
+
+<script>
 export function onEnter (ctx) {
   if (ctx.server?.underPressure) {
     ctx.clientOnly = true
   }
 }
-
-export function Index () {
-  return <p>No pre-rendered HTML sent to the browser.</p>
-}
+</script>
 ```
 
 The example demonstrates how to turn off SSR and downgrade to CSR-only, assuming you have a `pressureHandler` configured in [`underpressure`](https://github.com/fastify/under-pressure) to set a `underPressure` flag on your server instance.