Nuxt.jsでrequire, urlが適用されるようにしたいです。

Question

前提・実現したいこと

Nuxt.jsでFirebaseで作成したデータベースにアクセスしたいです。

発生している問題・エラーメッセージ

error  'require' is not defined                  no-undef
error  'url' is assigned a value but never used  no-unused-vars

該当のソースコード

<template>
  <section class="container">
    <h1>{{title}}</h1>
    <p>{{message}}</p>
    <ul v-for="(data, index) in json_data" :key="index">
      <li>{{data.name}} ({{data.age}}) [{{key}}]</li>
    </ul>
  </section>
</template>

<script>
  const axios = require('axios');

  let url = "https://sample.firebaseio.com/person.json";

  export default {
    data: function () {
      return {
        title: 'Axios',
        message: 'axios. sample.',
      };
    },
   asyncData: async function () {
     let result = await axios.get('url');
     return { json_data: result.data };
   },
  }
</script>

試したこと

requireが適用されていないので、browserifyをインストールして使おうとしたのですが、そもそも使えているのか不安です。。

補足情報（FW/ツールのバージョンなど）

$ vue -V
-> 3.11.0

$ ncu
-> nuxt ^2.0.0 → ^2.9.2

Answer 1

require はブラウザの機能ではなく Node.js の機能です。
そのため、HTML部分に書くことはできません。

.vue のような JS ファイルに書く
-> 手元の Node.js 環境で webpack (browserify) でコンパイル (require等が解決され、1つのJSファイルになる
-> HTMLからは生成されたJSを読み込む ( できた JS からは require は消えている

のような流れなので、です。

また、 Nuxt を利用しているのであればデフォルトで webpack が利用されると思うので、browserify は不要かと思われます。

Comments

[toshihirokato]

早速のご回答ありがとうございます！
とてもわかりやすくて助かりました????

[toshihirokato]

無事解決いたしました！
本当にありがとうございました！！