んー、、フロントまわりの技術ぜんぜん分からんなー。

Laravel+Nuxt.jsのセットアップやろ。

Nuxt.js!?

LaravelはPHPのMVCフレームワーク。Vue.jsをサポートしていてすぐ使える。ちょっとだけ触ったことある。
Nuxt.jsはユニバーサルなVue.jsアプリケーションを構築するためのフレームワーク。(ココで言うユニバーサルってなに?)
とりあえずServer Side Rendering(SSR)するためのものっぽい。そういやそんな話聞いた気がする。

とりあえずググるかー

以下の2記事がヒット。
LaravelとNuxt.jsを同一レポジトリで管理するときの構成 | SCOUTER開発ブログ
Laravel に Nuxt.js プロジェクトを入れたい - Qiita

これらの記事を参考に動くところまでやりました。

Laravelのインストール

$ composer create-project laravel/laravel <laravel-project名> "5.5"

v5.5のLaravelをインストール。
<laravel-project名>ディレクトリが作成される。

Nuxtのインストール

$ npm install -g vue-cli #vue-cliがなければインストール
$ cd <laravel-project名>
$ vue init nuxt-community/starter-template resources/nuxt

作るもの

localhost:3000でNuxtを動かし、ブラウザからアクセスします。
エンドポイント先のテンプレートはLaravelのAPI(localhost:8000)を叩いて文字列(helloworld)を取得し表示します。
良きタイミングでSSRしてくれてるはず。

動かすための準備

Nuxt.jsのconfigファイル等をLaravelのルートディレクトリに持ってくる。

$ rm package.json # laravelインストール時に生成されるやつは不要。
$ mv resources/nuxt/package.json package.json #代わりにこっち使う。
$ mv resources/nuxt/nuxt.config.js nuxt.config.js

jsからLaravelのAPIを叩くために以下のmoduleをインストールしておく。

$ npm install @nuxtjs/axios

nuxt.conf.jsの中身を以下のように書き換える。


module.exports = {
  ...

  srcDir: 'resources/nuxt',
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
  },

  ...
}
$ npm install

resources/nuxt/pages/index.vueを以下に書き換える。

<template>
  <div> {{data}} </div>
</template>
<script>
export default{
  async asyncData({app}){
    const data = await app.$axios.$get('http://localhost:8000/api')
    return {data};
  }
}
</script>

routes/api.phpに以下を追記


Route::get('/', function(){ return 'helloworld';});

動かす

#Laravelの起動
$ php artisan serve
# Nuxt.jsの起動
$ npm run dev

接続確認

http://localhost:3000/にアクセスすると「helloworld」と表示されるはず。

よく分かってないこと

LaravelのresourcesディレクトリにNuxtをインストール(インストール場所はここでいいのか?)。
公式がスターターテンプレートを用意してくれてる。
vue init webpack <project-name> でもインストールできるけど、どっちがいいんでしょう?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です