Laravel 5.6でVueのサンプルコンポーネントを表示させる

Laravelとフロントエンドのインストール

laravelのプロジェクトを作成する。(PHP7.2以上がインストールされていること)

composer create-project laravel/laravel todo-app

ちゃんと動くかサーバを起動してみる。

cd todo-app/
php artisan serve

動いてることが確認できた。 f:id:keshipi:20180523225714j:plain

プロジェクトを作成すると設定済みのpackage.jsonがあるから、それらをインストールする。

npm install

Vueのサンプルコンポーネントを表示

(laravel-vue-todo/resources/assets/js/app.js)

http://127.0.0.1:8000/app にアクセスがあったら、Vueのサンプルコンポーネントを含んだViewを返すようにする。

/appへのルートを追記する。

// laravel-vue-todo/routes/web.php
Route::get('/app', function () {
    return view('app');
});

welcome.blade.phpをコピーして、 Vueコンポーネントが表示されるようにapp.blade.phpを追加する。

// laravel-vue-todo/resources/views/app.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Laravel</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <div id="app">
             <example-component></example-component>
        </div>
        <script src="js/app.js"></script>
    </body>
</html>