Nuxt.jsとRailsのAPI連携方法(途中) - Hashimoto-Noriaki/rails-rspec-memo GitHub Wiki

Vue.js(Nuxt.jsのメリット)

今回のファイル構成

nuxt-laravel-todo % ls
README.md	backend		frontend

前提条件(フロントからサーバーにリクエストを送る準び)

新規アプリ開発の時に、Axiosを選択したこと前提。

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

Axiosの設定：baseURLの設定

import axios from "axios";

export default axios.create({
    baseURL: process.env.API_ENDPOINT
})

.envの設定

Axiosの設定をしていきます。

pwd
nuxt-laravel-todo/frontend

の状態で、

npm install --save-dev @nuxtjs/dotenv

を実行。インストールされればOKです。 その後に、使用するライブラリをNuxtの設定ファイルに追記します。

中のコードにbuildModulesがあるので、そこに追記します。

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/dotenv', #追記
  ],

次に.envを作成します。(ここではfrontendの中に作成)

API_ENDPOINT="http://localhost:8000"

のような記述を追記します。Laravelでは、デフォルトで8000がポートになることがあるからです。(Railsだと3000)

Nuxt側のポート変更

Nuxt側もポートを変更します。

import colors from 'vuetify/es5/util/colors'

export default {
  server: {
    port: 8080
  },

最初の行のすぐ下に、サーバーを起動した時のポートの変更を記載しました。

npm run dev

http://localhost:8080/ で起動を確認できました。

スクリーンショット 2024-09-01 1.54.55.png

参考資料

https://www.techpit.jp/courses/204

⚠️ **GitHub.com Fallback** ⚠️