vue.jsでフォームフィールドから取得したデータをjsonファイルで書き出したい

Question

Nuxt.jsでvue環境を構築しています。
inputフィールドに値を入れてボタンを押した時に、jsonデータにしてファイルに書き出したいのですが、
「fs.writeFileSync is not a function」というエラーが出て、書き出しがなされません。

# pages/index.vue
<template>
  <div class="container">
    <form action="/thanks" method="post">
      <section>
        <h2> （１）あなたのお名前を入力してください。</h2>
        <input v-model="yourName" type="text">
      </section>
      <section>
        <h2>（２）メッセージを入力してください。</h2>
        <textarea v-model="yourMessage" />
      </section>

      <input type="submit" value="送信" @click="exportMessage">
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      yourName: '',
      yourMessage: ''
    }
  },
  methods: {
    exportMessage () {
      const fs = require('fs')
      const data = {
        yourName: this.yourName,
        yourMessage: this.yourMessage
      }
      fs.writeFileSync('test.json', JSON.stringify(data))
    }
  }
}
</script>

コードは現在上記のような状態です。
「 fs.writeFileSync」を使う時はmethodに書くべきではないということなのですが、どのようにすれば良いのかわからず、ご教示いただければと思います。

Answer 1

fsはNode.jsのファイルモジュールです。VueはWebのJavaScriptなので使えるわけありません。

Webのファイルモジュールを使う
又はExpressなどに情報を渡しサーバー側で保存するという二択です。

Comments

[heureux]

そうなのですね、詳しい解説をありがとうございました！