laravel_nuxt

構成

PHP8.1
Laravel8
Nuxt2.5
Postgres13
nginx1.23

参考文献

LaravelとNuxtではじめるSNSシェアアプリ開発 (技術の泉シリーズ（NextPublishing）

Backend
https://github.com/aiiro/ogp-backend

FrontEnd
https://github.com/minetti0327/ogp-frontend

DB接続

docker exec -it lara_nux_db sh 
psql -U user -d lara_nux

プロジェクト作成

npx create-nuxt-app プロジェクト名

フロント(nuxt)へのアクセス

 docker exec lara_nux_node npm run dev

> [email protected] dev /var/www/html
> nuxt

ℹ Listening on: http://172.30.0.3:3000/
ℹ Preparing project for development
ℹ Initial build may take a while
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
ℹ Compiling Client
ℹ Compiling Server
✔ Server: Compiled successfully in 14.69s
✔ Client: Compiled successfully in 20.34s
ℹ Waiting for file changes
ℹ Memory usage: 236 MB (RSS: 333 MB)
ℹ Listening on: http://172.30.0.3:3000/

http://localhost:3000/ へのアクセスするとアクセスできる

nuxtのルーティング

ディレクトリ構造で自動的に決まる

pages/
  index.vue エントリーポイント

https://qiita.com/tekondo/items/80555991c019808669ef
/users/34/
の場合、以下のようなディレクトリ構成になる
pages/
--| users/
-----| _id.vue

.nuxt/router.jsに吐かれているのを確認できる

$axios.getと$axios.$getの違い
$axios.getで取得する場合は、レスポンスが下記のようになります。

{
  "data": [], // レスポンスデータ
  "status": 200, // ステータスコード
  "statusText": "", // ステータステキスト
  "headers": {},
  "config": {},
  "request": {}
}
実際に取得したいデータは「data」内に入っています。

statusコードなどがなく、シンプルな反面、statusコードの切り分けなどができない
https://webrandum.net/nuxt-axios-module/
https://zenn.dev/captain_blue/articles/nuxt-axios-method-memo

styleにboostrap-vueを活用

https://bootstrap-vue.org/