NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. Vue.js
  3. Laravel7 vue.jsを使用する手順

Laravel7 vue.jsを使用する手順

Laravel7 vue.jsを使用する手順

Laravel7でvue.jsを使用できるようにするまでの手順を記述してます。

目次

環境

  • OS CentOS Linux release 8.0.1905 (Core)
  • Composer 1.10.5
  • PHP 7.4.5
  • Percona Server Ver 8.0.19-10
  • Laravel Framework 7.6.2

※CentOs8に Laravel のインストールはこちら

laravel/uiをインストール

公式パッケージのインストールを実行します。

composer require laravel/ui

vue環境を構築します。

php artisan ui vue

パッケージのインストールとコンパイルを行います。

 npm install && npm run dev

確認

実際にvue.jsを利用してみます。

/resources/js/app.jsに既に登録されている「component」である
「 ExampleComponent.vue 」を利用します。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/vue/resources/views内のwelcome.blade.phpのstyleタグ以下を下記のように編集します。

</style>
        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>

            <div id="app">
                <example-component></example-component>
            </div>
            <script src="{{mix('js/app.js')}}"></script>
        </div>
    </body>
</html>

追加した箇所は下記となります。

<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
<div id="app">
　　　　<example-component></example-component>
</div>
<script src="{{mix('js/app.js')}}"></script>

実行します。

php artisan serve --host 0.0.0.0

ブラウザから http://プライベートIP:8000 にアクセスすると「example」コンポーネントが表示されていることが確認できます。