initial version

pi0 · danielroe · pi0 · commit 297dda8f5a91 · 2022-03-14T13:23:49.000+01:00
Co-authored-by: Daniel Roe &lt;daniel@roe.dev&gt;
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# Vue 3 + SSR + Vite
+
+This template should help get you started developing with Vue 3 and SSR in Vite.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <div id="app">
+    <!--app-html-->
+  </div>
+  <script type="module" src="/src/entry-client.ts"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "node ./server.mjs"
+  },
+  "dependencies": {
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "latest",
+    "@vitejs/plugin-vue-jsx": "latest",
+    "express": "^4.17.1",
+    "vite": "latest"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/server.mjs b/server.mjs
@@ -0,0 +1,55 @@
+import fs from 'fs'
+import path from 'path'
+import express from 'express'
+import { createServer } from 'vite'
+
+const resolve = (p) => path.resolve(p)
+
+const manifest = {}
+
+const app = express()
+
+const vite = await createServer({
+  root: resolve('.'),
+  logLevel: 'info',
+  server: {
+    middlewareMode: 'ssr',
+    watch: {
+      // During tests we edit the files too fast and sometimes chokidar
+      // misses change events, so enforce polling for consistency
+      usePolling: true,
+      interval: 100,
+    },
+  },
+})
+
+// use vite's connect instance as middleware
+app.use(vite.middlewares);
+
+app.use('*', async (req, res) => {
+  try {
+    const url = req.originalUrl;
+
+    let template, render;
+
+    template = fs.readFileSync(resolve('index.html'), 'utf-8');
+    template = await vite.transformIndexHtml(url, template);
+    render = (await vite.ssrLoadModule('/src/entry-server.ts')).render;
+
+    const appHtml = await render(url, manifest);
+
+    const html = template
+      .replace(`<!--app-html-->`, appHtml);
+
+    res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
+  } catch (e) {
+    vite && vite.ssrFixStacktrace(e);
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
+});
+
+
+app.listen(3000, () => {
+  console.log('http://localhost:3000');
+})
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <router-link to="/">Home</router-link>
+    <router-view v-slot="{ Component }">
+      <Suspense>
+        <component :is="Component" />
+      </Suspense>
+    </router-view>
+  </div>
+</template>
+
+<style>
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./assets/fonts/Inter-Italic.woff2#iefix') format('woff2'),
+    url('./assets/fonts/Inter-Italic.woff') format('woff');
+}
+.inter {
+  font-family: 'Inter';
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/src/entry-client.ts b/src/entry-client.ts
@@ -0,0 +1,7 @@
+import { createApp } from './main';
+
+const { app, router } = createApp();
+
+router.isReady().then(() => {
+  app.mount('#app');
+});
diff --git a/src/entry-server.ts b/src/entry-server.ts
@@ -0,0 +1,13 @@
+import { createApp } from './main';
+import { renderToString } from 'vue/server-renderer';
+
+export async function render(url, manifest) {
+  const { app, router } = createApp();
+
+  router.push(url);
+  await router.isReady();
+
+  const ctx = {};
+  const html = await renderToString(app, ctx);
+  return { html };
+}
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,10 @@
+import App from './App.vue';
+import { createSSRApp } from 'vue';
+import { createRouter } from './router';
+
+export function createApp() {
+  const app = createSSRApp(App);
+  const router = createRouter();
+  app.use(router);
+  return { app, router };
+}
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -0,0 +1,7 @@
+<template>
+  <h1>Home</h1>
+</template>
+
+<script setup>
+// Reproduction
+</script>
diff --git a/src/router.ts b/src/router.ts
@@ -0,0 +1,22 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory,
+} from 'vue-router';
+
+const pages = import.meta.glob('./pages/*.vue');
+
+const routes = Object.keys(pages).map((path) => {
+  const name = path.match(/\.\/pages(.*)\.vue$/)[1].toLowerCase();
+  return {
+    path: name === '/home' ? '/' : name,
+    component: pages[path],
+  };
+});
+
+export function createRouter() {
+  return _createRouter({
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes,
+  });
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ]
+  },
+  "include": [
+    "src",
+    "server.mjs"
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,8 @@
+const vuePlugin = require('@vitejs/plugin-vue')
+
+module.exports = {
+  plugins: [vuePlugin()],
+  build: {
+    minify: false,
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "recommendations": ["johnsoncodehk.volar"]`
	`3`	`+}`