Vue 3 SSR Setup

March 6, 2025 · AI Conversations

User

How to use ssr in existing vue 3

Assistant

To enable **Server-Side Rendering (SSR)** in an **existing Vue 3** project, you need to set up **Vite SSR** or **Nuxt 3**. Here’s how to integrate SSR into your existing Vue 3 project with **Vite SSR**:

—

### **Step 1: Install Dependencies**
Ensure you have **Vue 3 + Vite** set up. Then, install the required SSR dependencies:

yarn add express @vue/server-renderer vite

—

### **Step 2: Create an Express Server for SSR**
Create a file named `server.js` in your project root:

import express from "express";
import { createServer as createViteServer } from "vite";

async function startServer() {
  const app = express();

  // Create Vite Server in middleware mode
  const vite = await createViteServer({
    server: { middlewareMode: true },
  });

  app.use(vite.middlewares);

  app.get("*", async (req, res) => {
    try {
      // Load entry file
      const { render } = await vite.ssrLoadModule("/src/entry-server.js");

      // Render Vue App to HTML
      const appHtml = await render();
      const html = `<!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Vue SSR</title>
        </head>
        <body>
          <div id="app">${appHtml}</div>
          <script type="module" src="/src/entry-client.js"></script>
        </body>
        </html>`;

      res.status(200).set({ "Content-Type": "text/html" }).end(html);
    } catch (e) {
      vite.ssrFixStacktrace(e);
      console.error(e);
      res.status(500).end(e.message);
    }
  });

  app.listen(3000, () => {
    console.log("Server running at http://localhost:3000");
  });
}

startServer();

—

### **Step 3: Create Vue Entry Files**
#### **Client Entry (`src/entry-client.js`)**

import { createApp } from "./main";

const app = createApp();
app.mount("#app");

#### **Server Entry (`src/entry-server.js`)**

import { createApp } from "./main";
import { renderToString } from "@vue/server-renderer";

export async function render() {
  const app = createApp();
  return await renderToString(app);
}

#### **Vue App (`src/main.js`)**
Modify your Vue entry file:

import { createSSRApp } from "vue";
import App from "./App.vue";

export function createApp() {
  return createSSRApp(App);
}

—

### **Step 4: Update `package.json`**
Add an SSR script to start your server:

"scripts": {
  "dev": "vite",
  "dev:ssr": "node server.js"
}

Run the SSR server:

yarn dev:ssr

—

### **Step 5: Test the Setup**
– Open **http://localhost:3000/**
– View the source code (`Ctrl + U`) to verify if HTML is pre-rendered.

This will enable **SSR in your Vue 3 project with Vite**. Let me know if you need further optimizations!

Vue 3 SSR Setup

Leave a Comment Cancel