Vue/mysql取得表示

server/api.jsを作成

const express = require('express')
const router = express.Router()
router.get('/books', (req, res, next) => {
  const mysql = require('mysql');
  const connection = mysql.createConnection({
    host : 'localhost',
    user : 'root',
    database: 'test',
    password: ''
  });
  var ret=[];
  connection.connect();
  connection.query('SELECT * from books;', function(error, row, fields){
    if (error) {
      console.log(error);
    } 
    var dat = [];
    for (var i = 0;i < row.length; i++) {
      dat.push({id: row[i].id, title: row[i].title});
    }
    ret = JSON.stringify(dat);
    res.header('Content-Type', 'application/json; charset=utf-8')
    res.send(ret)
  });
  connection.end();
})
module.exports = router


server/index.js修正
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

///////////////////////追加
const apiRouter = require('./api')

async function start () {

  /////////////////追加
  app.use('/api', apiRouter)
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  await nuxt.ready()
  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()


pages/index.vue
template>
  div class="container">
    table border="1">
      tbody>
      tr>
        th>ID/th>
        th>タイトル/th>
      /tr>
      tr v-for="item in items" :key="item.id">
        td>{{ item.id }}/td>
        td>{{ item.title }}/td>
      /tr>
      /tbody>
    /table>
  /div>
/template>

script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted: function() {
    this.$axios
      .$get('/api/books')
      .then(response => {
        this.items = response
      })
      .catch(error => {
        console.log(error)
      })
  }
}
/script>

style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/style>