Nuxt.jsでのaxios非同期通信をする

Nuxt.jsでのaxios非同期通信をする

http通信で、ブラウザとWebサーバーとの間で通信を行うためのパッケージであるaxiosをnuxt.js環境に導入します。 npm install axios JSON Placeholderなどの外部サービスからテスト用にリクエストを送れるJSONデータを用意します。 <template> <div>{{users}}</div> </template> <script> const axios = require("axios"); let...
フロントをNuxt.js、バックエンドをfirebaseでSPA環境を作る

フロントをNuxt.js、バックエンドをfirebaseでSPA環境を作る

フロントをnuxt.js、バックエンドをfirebaseでSPA開発をする場合の連携方法についてご紹介します。 まずは、npx create-nuxt-appでnuxt.jsの環境を構築し、その後の方法を以下に示します。注意として、create-nuxt-appで環境構築する際の設定として、レンダリングモードをSPAにすることが必要になる点に気をつけましょう。...
Nuxt.jsのルーティングの仕組み

Nuxt.jsのルーティングの仕組み

Nuxt.jsはVue.jsのフレームワークで、Vue.jsでも使用されることが多々あるVue Routerを用いてルーティング処理を行っています。 nuxtの開発環境が構築されているフォルダにある、「.nuxt」ディレクトリのrouter.jsに設定が記述されています。routerOptionsの中に以下のような記述があると思います。 routes: [{ path: "/", component: _2c9cd992, name: "index" }],...