見出し画像

Laravel で Vue.jsを利用する方法

今回はLaravel でVue.jsを利用する方法を簡単に記載します。

laravel/resources/js/app.js に追記

まずはlaravel/resources/js/app.js に1行追記します。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// 下記を追加
Vue.component('test-component', require('./components/TestComponent.vue').default);


Componentsディレクトリにvueファイル作成

resources/js/components/ ディレクトリに「TestComponent.vue」を作成します。今回は下記のように作成します。

<template>
   <div class="container">
       <div class="row justify-content-center">
           <div class="col-md-8">
               <div class="card">
                   <div class="card-header">Test Component</div>
                   <div class="card-body">
                       test用のcomponentです。
                   </div>
               </div>
           </div>
       </div>
   </div>
</template>
<script>
   export default {
       mounted() {
           console.log('Component mounted.')
       }
   }
</script>


bladeファイルに追記。

vueを表示させるbladeファイルに下記追記します。

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


ビルドする

下記でビルドします。

npm run dev

※laradockの場合は下記でビルドできます。

docker-compose exec workspace npm run dev


キャッシュ削除リロード

ビルドしたら対応可能なのですが、ブラウザによってはキャッシュが残ってしまい確認できない場合があります。

その場合は、ブラウザ上で下記コマンドを実行してキャッシュを削除しページリロードしてください。

Shift + command + R


以上で完了です。




この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでいただきありがとうございます!twitterもやってますのでよろしくお願いします。 https://twitter.com/koushikagawa

励みになります!
3
長野県松本市のWeb制作会社 Res, Inc. 代表 / Web ディレクター(IAが得意)、エンジニア(Laravel/PHP/MySQL/Nuxt.js/Vue.js/ Contentful/Netlify/Drupal/Wordpress)