Documentation doesn't cover version 3.x yet it's the default installed version

[AnoRebel]

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the bug has not already been reported

Fastify version

3.25.0

Plugin version

3.0.0-alpha.2

Node.js version

14.x

Operating system

Linux

Operating system version (i.e. 20.04, 11.3, 10)

Linux Mint 20.2 (Uma)

Description

First, I'm grateful for the great work done here, I really appreciate it as I was looking for exactly this for my project.

Ok, so my problem(s) are:

• Installing this plugin currently installs the alpha version which is 3.x, but both the documentation and GitHub only show details for version 2.x.
• Documentation doesn't seem up-to date, my point being, I had to go to the issues to find out that i needed app.vite.commands() in order to run eject(so am not sure to use both ready() and commands(),or just one of them), which was also another roller coaster ride to get to that point. From the issue is where I saw a reply saying to check the breaking changes, which I could only find in the GitHub release page, which, at the same time, doesn't even show the version I have installed.
• Adding custom CSS, was hectic too, and even as I got it working now, I'm not sure if it's the right way.

So, to sum it up, I guess I'm saying I need help. Example below, is one of the problems I came upon. I spent so much time with this since I really like the project, but it had me confused all over. Please help..

Steps to Reproduce

I setup as directed in the docs.

My server.js:

const { PORT, PINO_CONFIG } = require("./utils");
const fastify = require("fastify")({ logger: PINO_CONFIG });
const FastifyVite = require("fastify-vite");
const renderer = require("fastify-vite-vue");
const path = require("path");

const dev = process.env.NODE_ENV === "development";

const main = async () => {
  await fastify.register(FastifyVite, {
    api: true,
    root: __dirname,
    renderer,
    vite: {
      build: {
        outDir: path.resolve(__dirname, "api"),
        minify: !dev,
      },
    },
  });
  await fastify.decorate("app_root", path.resolve(__dirname));
  await fastify.register(require("./core/plugins")); // Other Fastify plugins I wanna use
  await fastify.register(require("./core")); // My routes
  await fastify.vite.commands();
  await fastify.vite.ready();
  return fastify;
};

if (require.main === module) {
  main().then(fastify => {
    fastify.listen(PORT, err => {
      if (err) {
        fastify.log.error(err);
        process.exit(1);
      }
      console.log(fastify.app_root, fastify.config);
    });
  });
}

module.exports = main;

In my views/index.vue:

<script>
import { onMounted } from "vue";
import { useHydration } from "fastify-vite-vue/client.mjs";

export const path = "/api";
export default {
  name: "Index",
  async setup() {
    const ctx = await useHydration();
    onMounted(() => {
      console.log(ctx);
    });
    return { ctx };
  },
};
</script>

<template>
  <h1>Hello World {{ $global }} - {{ ctx }}</h1>
</template>

This in turn throws the error below: [vite] Error when evaluating SSR module @app/routes.js: Error: Failed to resolve import "fastify-vite-vue/client.mjs" from "views/index.vue". Does the file exist?

Upon checking, I couldn't find the client.mjs file and even the useHydration hook.

The $global variable is empty, which I'm assuming is not an error, it just means it's not populated yet.

Expected Behavior

No response

[galvez]

Ouch — so sorry about that, apparently I pushed an alpha version without the proper alpha tag.

In the new version, useHydration() is replaced by useIsomorphic(), usePayload() and useData().

See the new Vue 3 example here: https://github.com/fastify/fastify-vite/tree/dev/examples/vue-base

I'm working through the holidays in updating the documentation. Later tonight I'll push a new default 2.x release and start using the proper alpha npm tags.

You can access $global through useIsomorphic() now, all of those need to be imported from fastify-vite-vue/app in the alpha 3.x release. If you share a repo with me, I'll help you do the necessary fixes as I work out the new docs.

[AnoRebel]

My repo is at Mbx.

Would be grateful for any help. Currently, my issues are mostly:

• I need to setup Tailwindcss with Vite/Vue, most of the setup is done, but where to hook up the css file is the issue, I've managed to make it work for now, but I'm not sure if that's the way.
• How do I access the fastify instance if at all possible, in my Vite/Vue app?
• And I wanted a custom directory structure for my project, so at 1st, I liked the out-of-box experience of just adding the server.js(which in my case is index.js) and having the index.html added, but with troubles I had, I thought of customizing some things, so, my question is, can I setup the files(e.g if I eject) in my own custom directories, I might have missed it from the docs.
• Do you suggest I use the 3.x or the default 2.x??

Again, thanks for the help. And great work with this.

[galvez]

Closing issue as part of new maintenance routine. New doc suite at https://fastify-vite.dev!