9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

##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ではカバーしきれない場合などにご活用ください。

9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?