FE-star · icebox1234 · Sep 1, 2022 · Sep 2, 2022 · Sep 2, 2022 · Sep 2, 2022
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -26,5 +26,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm i
+    - run: npm run build
     # Just run tests once
-    - run: npm run start & npm test
+    - run: npm run nuxt-start & npm run start  & npm test
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 package-lock.json
-serverBack.js
+serverBack.js
+.nuxt
+.output
diff --git a/app.vue b/app.vue
@@ -0,0 +1,10 @@
+<template>
+    <HelloWorld></HelloWorld>
+</template>
+
+<script>
+import HelloWorld from './src/componnets/HelloWorld.vue';
+export default {
+    components: { HelloWorld }
+}
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -0,0 +1,6 @@
+import { defineNuxtConfig } from 'nuxt'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+
+})
diff --git a/package.json b/package.json
@@ -5,17 +5,24 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "node server.js",
-    "test": "jest"
+    "start": "node vueInner/server.js",
+    "test": "jest",
+    "dev": "nuxt dev",
+    "build": "nuxt clean && nuxt build",
+    "nuxt-start": "cross-env PORT=3001 node .output/server/index.mjs"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@vue/test-utils": "^2.0.2",
     "express": "^4.18.1",
-    "jest": "^29.0.0",
-    "puppeteer": "^16.2.0",
     "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.2",
+    "cross-env": "^7.0.3",
+    "jest": "^29.0.0",
+    "nuxt": "^3.0.0-rc.8",
+    "puppeteer": "^16.2.0"
   }
-}
+}
diff --git a/server.js b/server.js
diff --git a/src/componnets/HelloWorld.vue b/src/componnets/HelloWorld.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>{{ ssrText }}</div>
+</template>
+
+<script>
+export default {
+    name: 'HelloWorld',
+    data() {
+        return {
+            ssrText: 'Vue SSR Example'
+        }
+    }
+}
+</script>
diff --git a/test/index.spec.js b/test/index.spec.js
@@ -1,14 +1,24 @@
 const puppeteer = require("puppeteer");
 
 describe('NuxtLogo', () => {
-  test('is a Vue instance', async () => {
+  test('vueInner', async () => {
     const browser = await puppeteer.launch({ ignoreDefaultArgs: ['--disable-extensions'] });
     const page = await browser.newPage();
     await page.goto('http://localhost:3000')
     const bodyHandle = await page.$('body');
     const bodyInnerHTML = await page.evaluate(dom => dom.innerHTML, bodyHandle);
     await bodyHandle.dispose();
     browser.close();
-    expect(bodyInnerHTML.trim()).toBe('<div id="app"><div>Vue SSR Example</div></div>')
-  })
+    expect(bodyInnerHTML.trim()).toBe('<div id="app"><div>Vue SSR Example</div></div>');
+  });
+  test('nuxt', async () => {
+    const browser = await puppeteer.launch({ ignoreDefaultArgs: ['--disable-extensions'] });
+    const page = await browser.newPage();
+    await page.goto('http://localhost:3001')
+    const bodyHandle = await page.$('body > div[id="__nuxt"]');
+    const bodyOuterHTML = await page.evaluate(dom => dom.outerHTML, bodyHandle);
+    await bodyHandle.dispose();
+    browser.close();
+    expect(bodyOuterHTML.trim()).toBe('<div id="__nuxt"><div>Vue SSR Example</div></div>');
+  });
 })
diff --git a/vueInner/app.js b/vueInner/app.js
@@ -0,0 +1,8 @@
+import { createSSRApp } from 'vue';
+
+export function createApp() {
+    return createSSRApp({
+        data: () => ({ text: 'Vue SSR Example' }),
+        template: `<div>{{ text }}</div>`,
+    });
+}
diff --git a/vueInner/client.js b/vueInner/client.js
@@ -0,0 +1,3 @@
+import { createApp } from './app.js';
+
+createApp().mount('#app');
diff --git a/vueInner/server.js b/vueInner/server.js
@@ -0,0 +1,37 @@
+import express from 'express';
+import { renderToString } from 'vue/server-renderer';
+import { createApp } from './app.js';
+
+const server = express();
+
+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('ready, listening on 3000');
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createApp } from './app.js';

		createApp().mount('#app');