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

##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](https://i.gyazo.com/5494510d22b15bedcd7af6d61542ff43.png)](https://gyazo.com/5494510d22b15bedcd7af6d61542ff43)

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


##１. ビルド環境の構築

まずプロジェクト直下の 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後のコピー先ディレクトリを変更します

```javascript
.copy('public', '../nova-app/public/nova')
```
↓

```javascript

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

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

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

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

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

test.vue

```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

```javascript
import test from '@/views/test'

// 省略

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

```

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

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

components.js

```javascript
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](https://i.gyazo.com/f59764e90f43367028c3ddb26e3e637f.png)](https://gyazo.com/f59764e90f43367028c3ddb26e3e637f)


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

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


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

もちろん単純なCRUDのページであればvueをいじらずともphpの記述だけで実装できます
今回は単純なCRUDではカバーしきれない場合などにご活用ください。