2019-09-12に投稿

Laravel 6 でVue.jsやReactを使う

Laravel 6 が先日リリースされました。Laravel 5 との違いとして、プロジェクトの初期化時にVue.jsのリソースが自動生成されなくなりました。そのため、引き続きLaravel 6でも使用したい場合は追加で導入する必要があります。

laravel/uiをインストール

まずはフロントエンドの初期化を行うためのパッケージとしてlaravel/uiというものがありますので、それをインストールします。

composer require laravel/ui --dev

JavaScriptとCSSの生成

uiライブラリを使って各種JavaScript、CSSのファイルを生成します。

Vue.jsを使う場合

下記のコマンドで生成します。

php artisan ui vue

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド&リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。appというIDの要素内でVue.jsを有効化させているため、その中にコンポーネントを配置しています。

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

これで画面の端っこに表示されます。

Reactを使う場合

下記のコマンドで生成します。

php artisan ui react

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド&リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。また、コンポーネントはexampleというIDの要素に挿入されるように指定されているため、その要素も表示したい場所に追加しておきます。

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

これで画面の端っこに表示されます。

参考リンク

公式の説明
JavaScript & CSS Scaffolding - Laravel - The PHP Framework For Web Artisans

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, React等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント