Laravel 環境で Nuxt.js を利用してみたいと思います。
npm など基本的な環境がインストールされていることを前提とします。

基本的な情報は、以下のサイトを参考にすると良いでしょう。

https://ja.nuxtjs.org/guide/installation

nuxt インストール

$ npm install nuxt@2.11.0

Vue ファイルのサンプル確認

Nuxt.js のデフォルトは、同一ディレクトリに展開するため、Laravel プロジェクトと混在しないように、別途作業ディレクトリを作成します。

今回は「」」ディレクトリを作成します。

$ mkdir client

設定ファイル

「nuxt.config.js」ファイルを作成し、「client」を作業ディレクトリに設定します。

module.exports = {
  srcDir: 'src/',
}

プロジェクト作成

Nuxt.js プロジェクトを以下設問を答えながら作成します。

$ yarn create nuxt-app client ./client

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in client
? Project name client
? Project description My top-notch Nuxt.js project
? Author name Yohei Yoshikawa
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
...

• Axios：サーバとAPI通信できるモジュール
• ESLint：JavaScript 検証ツール
• Prettier：JavaScript フォーマッター
• Universal (SSR)：サーバ側でレンダリング

ディレクトリ構成

プロジェクトが作成されると、ディレクトリも自動的に作成されます。
各ディレクトリは以下のようなファイルを配置します。

• assets：CSS や JavaScript ファイル
• components：vue のコンポーネント
• layouts：vue レイアウトファイル
  default.vue がデフォルトのレイアウトとなります。
• middleware：共通処理をする場合に利用するミドルウェアファイル
• node_modules：モジュールのパッケージファイル
• pages：各ページ用の vueファイル
• plugins：プラグインファイル
• static：イメージファイルなど
• store：データファイルなど

Nuxt 動作確認

Nuxt サーバ起動

nuxt コマンドでサーバを起動できます。

$ nuxt

nuxt のパスは「./node_modules/.bin/nuxt」です。

vue ファイルの作成

ブラウザ確認

デフォルトで「3000」ポートで起動確認できます。

http://localhost:3000/

index.vue に記載されたテンプレート「Hello World」が表示されることを確認します。

Laravel と Nuxt.js でAPI通信

Laravel でテストAPIを作成

routes/api.php に今回のテスト用の API (/api/test)を追加します。

Route::get('test', function() {
    return 'Lalavel Api Test';
});

API 動作確認

ブラウザで「Lalavel Api Test」が表示されるか確認します。

http://localhost/larablog/api/test

Axios モジュール

Nuxt.js で通信するために Axios モジュールを利用します。

nuxt-community/axio-modules

Next.js のプロジェクト作成でインストールしていますが、個別でインストールすることもできます。

$ npm i @nuxtjs/axios
//または
$ yarn add @nuxtjs/axios

Proxy モジュールインストール

Docker 環境で Nuxt.js + axios を利用するとポートの関係で通信ができません。 よって、Proxy を利用して通信ポートを設定します。

$ npm i @nuxtjs/proxy
//または
$ yarn add @nuxtjs/proxy

nuxt.config.js 設定

nuxt.config.js に 「axios」「proxy」モジュールを設定します。

module.exports = {
  srcDir: 'src/',
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    baseURL: 'http://localhost:3000'
  },
  proxy: {
    '/api': 'http://localhost/',
  },
}

Docker 環境で動作させると「http://localhost/」のリクエストがリジェクトされるため、プロキシを設定が必要です。

 ERROR  connect ECONNREFUSED 127.0.0.1:8000    

上記では、axios のベースURLを「http://localhost:3000」（Nuxt.jsサーバのデフォルト）を設定します。

そして、proxy は /api を検出したら「http://localhost/」（ポート80）にアクセスできるようにします。

index.vue

まず、template タグのデータ部分を vue変数に修正します。

templateタグの下に、script タグで以下を追記します。

export default {
  async asyncData({app}) {
    const url = 'http://localhost/api/test' //Laravel の API URI
    const message = await app.$axios.$get(url)
    return {
        url,
        message
     };
  }
}

Nuxt サーバで動作確認

$ nuxt

Nuxt サーバを起動して、http://localhost:3000 にアクセスしてみます。

index.vue で設定した API URL 「http://localhost/api/test」でリクエスト、Laravel API の「Lalavel Api Test」がレスポンスされれば成功です。