◀ 52.

【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

<!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>

        

            

        

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

 

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

<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>

 

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

 

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストールと設定
  2. クイックスタート & チュートリアル(初心者向け)
  3. クイックスタート & チュートリアル(中級者向け)
  4. ルーティング
  5. Bladeテンプレート(ビュー/レイアウト)
  6. コントローラー
  7. マイグレーションとテーブル定義
  8. データベースの設定
  9. Eloquentモデル (ORM)
  10. SQLとクエリビルダー
  11. バリデーション
  12. .envファイルの設定値へのアクセス
  13. 動作環境による分岐処理
  14. configフォルダ配下の設定値へのアクセス
  15. assetヘルパーを利用したpublicフォルダへのアクセス
  16. storageフォルダへのアクセス
  17. アプリケーション名の変更
  18. メンテナンス
  19. ログイン画面(認証システム)の作成
  20. ログインの必須化
  21. ログインユーザー情報の取得
  22. ルートの認証化
  23. 本番サーバーへのデプロイ方法
  24. 多言語化
  25. csrf_field
  26. ファイルのダウンロード
  27. CSVのアップロードおよび読み込み(maatwebsite/excel)
  28. ページタイトルの設定
  29. コマンド一覧
  30. エラー一覧
  31. SQLの実行ログ出力方法
  32. キャッシュのクリア
  33. Selectの結果の最初もしくは最後に任意の値を追加する方法
  34. ajaxでPOST通信する際の注意点
  35. ソーシャルログインの実装
  36. セッション情報の確認
  37. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  38. redirectやreturn viewにメッセージを付与する方法
  39. クッキー(cookie)の設定と取得
  40. クラスの再読み込み
  41. csrfの有効時間を変更する方法
  42. ViewComposerを用いてviewに共通の値を付与する方法
  43. View::shareを用いて共通の値を各ビューに渡す方法
  44. ミドルウェアを用いた処理の共通化
  45. Middleware内でAuth::check()などを使用する方法
  46. Controller以外でリダイレクトする方法
  47. セッションの値の取得/保存/更新/削除
  48. $requestの値を変更する方法
  49. 常時SSL化
  50. ページング(ページネーション)をする方法
  51. vue.jsとの連携
  52. Vue.jsと連携するSPA実行環境構築
  53. .envの値をvue.jsで参照する方法
  54. vue.jsを本番環境にリリースする方法
  55. could not find driver（Windows, MySQL編）
2026-08-07 17:13:40 T 2453

人気ページ

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