Posted at

LaravelNovaで独自ページを追加してみた

More than 1 year has passed since last update.


Laravel Novaとは

Laravel Novaは最近発表されたばかりのLaravel用の管理者画面作成パッケージになります

Laravelのメイン開発者が作ったこともありかなり話題になっています

Laravel Novaのような管理者画面用のパッケージはプロダクトの初期など管理者画面の作成に工数を避けない場合に重宝します。


導入におけるポイント

このような管理者画面用のパッケージは無料のものから有料のものまで幅広くありますが、実際に導入を検討するにあたって

外せないポイントが以下の2つだと思っています

1. テーブルのCRUD画面が、ほぼ工数0で実装できる

2. 独自のページを簡単に追加できる

1 に関しては他の記事や公式サイトなどを参考にしていただければ、問題なくできることがわかると思いますが

2 の個別ページの追加などに関しては記載がなかったので今回ご紹介させていただきます。


前提知識

個別のページの追加するにあたって、まずLaravelNovaの簡単な構成をお話します。

Laravel Novaはページの構成にVue.jsを使用しており,ページ遷移などはvue-routerを使用する

SPAの管理画面になっています。

なので、ページを追加するにあたってlaravelのbladeではなくvueファイル単位で追加していくことになります。

そのためbuildする必要があるので、npmコマンドが実行できる環境を予め構築しておいてください。


追加ページ

今回は画面に

Image from Gyazo

こんな感じのカスタム画面を追加してみようと思います


1. ビルド環境の構築

まずプロジェクト直下の nova ディレクトリへ移動します

cd nova

次に必要なモジュールをインストールします (必ずnovaディレクトリ配下でやってね)

npm install

完了すると以下のように、nova配下に node_modules ディレクトリが作成されます

nova

   ├─ config
   ├─ database
   ├─ node_modules
   ├─ ...

次にnova配下にコメントアウトしてあるwebpack.mix.jsがあるのでリネームして使える状態にします

webpack.mix.js.dist → webpack.mix.js にする

webpack.mix.js内に記述してあるbuild後のコピー先ディレクトリを変更します

.copy('public', '../nova-app/public/nova')


.copy('public', '../public/nova-assets/')

これでページを追加する準備は整いました


2. ページの追加とvue.routerの設定

以下のようにviews配下にtest.vueを追加します

nova

   ├─ config
   ├─ database
   ├─ node_modules
   ├─ resources
   ├─js
     ├─ views
     ├─ test.vue ⬅ ここに追加する!!

test.vue

<template>

<main>
<p>カスタムページです</p>
<br>
<input type="button" value="OK">
</main>
</template>

ページを追加できたら、ルーティングの設定をします

routes.jsの中身に先程のページを追記します

nova

   ├─ config
   ├─ database
   ├─ node_modules
   ├─ router
   ├─routes.js

routes.js

import test from '@/views/test'

// 省略

{
name: 'test',
path: '/test',
component: test,
},

以下のファイルにも追記します

nova

   ├─ config
   ├─ database
   ├─ node_modules
   ├─ resources
   ├─components.js

components.js

import test from '@/views/test'

// 省略

Vue.component('test', test)

以上でページの追加は終わりです。


3. buildして反映させる

最後にbuildします (必ずnovaディレクトリ配下でやってね)

npm run watch

実行すると以下のように表示されbuildが成功しているのがわかると思います


WAIT Compiling... 00:24:18

95% emitting

DONE Compiled successfully in 457ms 00:24:18

Asset Size Chunks Chunk Names
/app.js 2.39 MB 0 [emitted] [big] /app
/app.css 68.5 kB 0 [emitted] /app

buildが完了したので

/nova/test とアクセスすると先程追加したページが見れる用になっています

Image from Gyazo

本来であれば、左側のサイドバーからページ遷移できる用にしたいのですが、そのあたりはまた別の機会とさせてください。

以上で個別ページの追加は完了です!!


あとがき

LaravelNovaはまだ出たばかりであり、現在たくさんissueも上がっているため、もっと簡単にできるようになるかもしれません。個人的にはUIやvueを取り入れているところも含めて結構気に入ってるので今後LaravelAdminに変わってスタンダードになっていくのでは と期待しています。

もちろん単純なCRUDのページであればvueをいじらずともphpの記述だけで実装できます

今回は単純なCRUDではカバーしきれない場合などにご活用ください。