feat: added vue examples

This PR includes Vue examples, in particular: - Vue Spa - Vue Spa + Router - Vue using Sever Side Rendering with Express.js. Also updated the general Readme.
2026-02-25 16:58:58 +00:00 · 2024-07-28 20:35:56 +02:00
parent b168c34d56
commit 9e12b517c0
68 changed files with 7703 additions and 2 deletions
--- a/vue/ssr/src/app.js
+++ b/vue/ssr/src/app.js
@@ -0,0 +1,8 @@
+import { createSSRApp } from 'vue';
+
+export function createApp() {
+  return createSSRApp({
+    data: () => ({ count: 1 }),
+    template: `<div @click="count++">Click me: {{ count }}</div>`,
+  });
+}
--- a/vue/ssr/src/server.js
+++ b/vue/ssr/src/server.js
@@ -0,0 +1,38 @@
+import express from 'express';
+import { renderToString } from 'vue/server-renderer';
+import { createApp } from './app.js';
+
+const server = express();
+server.use(express.static('public'))
+
+server.get('/', (req, res) => {
+  const app = createApp();
+
+  renderToString(app).then((html) => {
+    res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Vue SSR Example</title>
+        <script type="importmap">
+          {
+            "imports": {
+              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+            }
+          }
+        </script>
+        <script type="module" src="./client.js"></script>
+      </head>
+      <body>
+        <div id="app">${html}</div>
+      </body>
+    </html>
+    `);
+  });
+});
+
+server.use(express.static('.'));
+
+server.listen(3000, () => {
+  console.log('Server listening on port 3000');
+});