Use Vue with Jeasx

Install Vue and the esbuild plugin for single-file components:

npm install vue unplugin-vue

Then register the plugin for the server and the browser build in jeasx.config.js:

export default {
  // The server imports this config at startup too, so import build-only plugins lazily.
  ESBUILD_SERVER_OPTIONS: async () => {
    const { default: vuePlugin } = await import("unplugin-vue/esbuild");
    return { plugins: [vuePlugin({ ssr: true, sourceMap: false })] };
  },

  ESBUILD_BROWSER_OPTIONS: async () => {
    const { default: vuePlugin } = await import("unplugin-vue/esbuild");
    return {
      // Vue's feature flags: avoid a console warning and drop unused code.
      define: {
        __VUE_OPTIONS_API__: "false",
        __VUE_PROD_DEVTOOLS__: "false",
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
      },
      plugins: [vuePlugin({ sourceMap: false })],
    };
  },
};

The styles of all components imported by a browser bundle end up in a CSS file next to it (e.g. index.css next to index.js). Link it in your page, so the components are styled before hydration and without JavaScript.

On the server, renderToString from vue/server-renderer turns a component into HTML. In the browser, createSSRApp(...).mount() takes over this markup without rendering it again.

Have a look at the source code of this page to see how the components are rendered on the server and hydrated in the browser.