この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:T
更新日時:2026-05-15 03:52:15

タイトル: Vue.jsと連携するSPA実行環境構築
SEOタイトル: 【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', '.*');

 

共通レイアウトの作成

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

resources/views/app.blade.php

    

        

        
        

        
        

    

    

        

            

        

        
        

    

 

 

サーバーサイド(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);
    }
}
 

 

適当なモデルを作成する。(マイグレーションするなり直に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',
    ];
}
 

 

ローカルサーバーの起動

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

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,
})

 

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

resources/assets/js/components/Articles.vue

 

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