【Laravel】Vue.jsと連携するSPA実行環境構築

▶

この記事の要点
Laravel + Vue.js で SPA 実行環境を構築する手順 Web ルーティング: Laravel 側を無効化し、すべて `app.blade.php` に集約クライアントルーティング: vue-router 側で行う API: *`routes/api.php` 経由で /api/ を使う**

前提

・Laravelプロジェクトを作成済み (まだの場合はこちらのページを参照)

・Vue.jsとの連携とvue-routerのインストール (まだの場合はこちらのページを参照)

・SPAの実行環境を構築するだけです。SPAの様々な記述方法は他のページを参照してください。

サーバーサイド(Laravel)のwebルーティングの無効化

webのルーティング処理はVue.js側で行うのでLaravel側のルーティング処理は不要となる。

※APIのルーティング(routes/api.php)は使用する（後述）

全てにリクエストに対して共通のレイアウト(resources/views/layouts/app.blade.php)を返すようにする。

routes/web.php
Route::get('/{any}', function () { return view('app'); })->where('any', '.*');

routes/web.php

Route::get('/{any}', function () {

return view('app');

})->where('any', '.*');

共通レイアウトの作成

Veu.jsを使うための最低限の設定と必要なheadタグ内の要素を記述すればよい。

resources/views/app.blade.php
<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- CSS --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> <router-view></router-view> </div> <!-- Scripts --> <script src="{{ mix('js/app.js') }}"></script> </body> </html>

resources/views/app.blade.php

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}">

<head>

<meta name="csrf-token" content="{{ csrf_token() }}">

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body>

<router-view></router-view>

</div>

<script src="{{ mix('js/app.js') }}"></script>

</body>

</html>

サーバーサイド(Laravel)のAPIを作成

テスト用にDBから適当なデータを取得するAPIを作成する。

まずは適当なAPIルーティングを作成する。

routes/api.php
Route::get('articles', 'Article\ArticleController@getArticles');

適当なコントローラーを作成する。

app/Http/Controllers/Article/ArticleController.php
namespace App\Http\Controllers\Article; use App\Http\Controllers\Controller; use App\Models\Article; use Illuminate\Http\Request; use Log; class ArticleController extends Controller { public function getArticles(Request $request){ $articles = Article::orderBy('update_datetime', 'DESC') ->limit(3) ->get(); return response()->json($articles); } }

app/Http/Controllers/Article/ArticleController.php

namespace App\Http\Controllers\Article;

use App\Http\Controllers\Controller;
use App\Models\Article;
use Illuminate\Http\Request;
use Log;

class ArticleController extends Controller
{
public function getArticles(Request $request){

$articles = Article::orderBy('update_datetime', 'DESC')
->limit(3)
->get();

return response()->json($articles);
}
}

適当なモデルを作成する。(マイグレーションするなり直にcreate tableしてテーブル作成をしておく)

※titleカラムを作成しておくこと。

app/model/Article.php
namespace App\Models; use Illuminate\Database\Eloquent\Model; class Article extends Model { protected $table = 'article'; protected $primaryKey = 'article_id'; public $incrementing = 'article_id'; protected $guarded = [ 'created_at', 'updated_at', ]; }

app/model/Article.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
protected $table = 'article';

protected $primaryKey = 'article_id';

public $incrementing = 'article_id';

protected $guarded = [
'created_at',
'updated_at',
];
}

ローカルサーバーの起動

以下の２つのコマンドをそれぞれ別窓で実行してローカルサーバーを起動する。

php artisan serve

npm run hot

Veu.jsでルーティングを作成

resources/assets/js/app.js
import Vue from 'vue' import VueRouter from 'vue-router' require('./bootstrap'); Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes: [ { path: '/articles', component: require('./components/Articles.vue') }, ] }) const app = new Vue({ el: '#app', router, })

resources/assets/js/app.js

import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap');

Vue.use(VueRouter)

const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/articles', component: require('./components/Articles.vue') },
]
})

const app = new Vue({
el: '#app',
router,
})

ビューの作成とAPIの呼び出し

resources/assets/js/components/Articles.vue
<template> <div> <ul> <li v-for="article in articles"> {{ article.title }} </li> </ul> </div> </template> <script></span></p> <p><span style="color:#ffffff"> export default {</span></p> <p><span style="color:#ffffff"> created() {</span></p> <p><span style="color:#ffffff"> this.getArticles()</span></p> <p><span style="color:#ffffff"> },</span></p> <p><span style="color:#ffffff"> data() {</span></p> <p><span style="color:#ffffff"> return {</span></p> <p><span style="color:#ffffff"> articles: []</span></p> <p><span style="color:#ffffff"> }</span></p> <p><span style="color:#ffffff"> },</span></p> <p><span style="color:#ffffff"> methods: {</span></p> <p><span style="color:#ffffff"> getArticles() {</span></p> <p><span style="color:#ffffff"> axios<br /> .get('/api/articles')<br /> .then(res => {<br /> this.articles = res.data<br /> })</span></p> <p><span style="color:#ffffff"> }</span></p> <p><span style="color:#ffffff"> }</span></p> <p><span style="color:#ffffff"> }</span></p> <p><span style="color:#ffffff"></script>

resources/assets/js/components/Articles.vue

<div>

<ul>

</li>

</ul>

</div>

</template>

以上の設定で「http://localhost:8000/articles」にアクセスするとarticleテーブルのtitle一覧が表示される。

編集

子ページ

子ページはありません

同階層のページ

2026-09-07 06:44:24 atom 2460

最近更新/作成されたページ

【django】ログイン認証機能 2026-09-08 03:22:09
MySQL ERROR 1063 Incorrect column specifier for column｜原因と直し方 2026-09-08 03:11:09
【PHPエラー】Object of class stdClass could not be converted to string 2026-09-07 07:46:04
Julia Genie ローカル開発サーバ起動完全ガイド 2026-09-07 07:46:04
Wi-Fi とは｜規格と世代（Wi-Fi 4〜7）・周波数帯・CSMA/CA・WPA3 NEW 2026-09-07 07:45:13
set コマンドでシェルオプションと位置パラメータを操作 | bash 2026-09-07 07:45:13
JPEG（.jpg/.jpeg）画像形式の完全ガイド — 仕様・マジックナンバー・他形式との比較・EXIF 2026-09-07 07:45:13
UE5 Get Overlapping Actorsで特定クラスだけ処理｜Class Filter・Cast To 2026-09-07 07:45:13
Linuxで特定拡張子のファイルを再帰削除｜find -deleteの安全手順 2026-09-07 07:45:13
Django CBVでテンプレートに値を渡す｜get_context_data・extra_context 2026-09-07 07:45:13
Linuxで複数ファイルの文字列を一括置換｜find・sed・xargsの安全手順 2026-09-07 07:45:13
Laravelルートグループ｜prefix・middleware・nameで一括管理 2026-09-07 07:45:13
Linux whichコマンドの使い方｜絶対パス取得とtype・command -vの違い 2026-09-07 07:45:13
Linux catコマンドの使い方｜行番号表示・複数ファイル連結 2026-09-07 07:45:13
unable to execute 'gcc': No such file or directory 2026-09-07 07:45:13

ページ一覧

その他