vue.js node.js

<!-- index.html -->
<div id="app">
  <input v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      const newTodo = ref('');
      const todos = ref([]);

      function addTodo() {
        if (newTodo.value.trim()) {
          todos.value.push(newTodo.value);
          newTodo.value = '';
        }
      }

      return { newTodo, todos, addTodo };
    }
  }).mount('#app');
</script>

// server.js
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

let todos = [];

app.get('/todos', (req, res) => {
  res.json(todos);
});

app.post('/todos', (req, res) => {
  todos.push(req.body.todo);
  res.status(201).json({ message: 'Todo added!' });
});

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

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue!');
    return { message };
  }
};

<div>{{ message }}</div>

app.get('/slow-route', async (req, res) => {
  const result = await someAsyncOperation();
  res.json(result);
});