Just simple paste files how simple vue 3 setup on server side.
Notes:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>It took time to learn it on how to handle vue loading import on browser side.
https://stackblitz.com/edit/vue-ssr-example-wkbutf?file=server.js
https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app
| import { createSSRApp } from 'vue'; | |
| export function createApp() { | |
| return createSSRApp({ | |
| data: () => ({ count: 1 }), | |
| template: `<div @click="count++">{{ count }}</div>`, | |
| }); | |
| } |
| import { createApp } from './app.mjs'; | |
| createApp().mount('#app'); |
| { | |
| "name": "node-starter", | |
| "version": "0.0.0", | |
| "type": "module", | |
| "private":"true", | |
| "scripts": { | |
| "dev": "node server.mjs" | |
| }, | |
| "dependencies": { | |
| "express": "^4.17.2", | |
| "vue": "^3.2.26" | |
| } | |
| } |
| import express from 'express' | |
| //import { createSSRApp } from 'vue' | |
| import { renderToString } from 'vue/server-renderer' | |
| import { createApp } from './app.mjs' | |
| const server = express() | |
| server.use(express.static('.')) | |
| //server.get('/vue', function(req, res) { | |
| //res.sendFile(__dirname + '/node_modules/vue/dist/vue.esm-browser.js'); | |
| //}); | |
| 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> | |
| </head> | |
| <body> | |
| <div id="app">${html}</div> | |
| <script type="module" src="/client.js"></script> | |
| </body> | |
| </html> | |
| `) | |
| }) | |
| }) | |
| console.log("http://localhost:3000") | |
| server.listen(3000, () => { | |
| console.log('ready') | |
| }) |