Laravel + Vue でSPAじゃない場合の構成と書き方

最近、Vueを勉強し始めた初心者(猫本で勉強中)なのですが、Laravel5.7の環境でVueを使用しています。
バックエンドとフロントは分業で、SPAではなく各ページに対応したbladeにvueのコンポーネントを置いています。
ディレクトリ構成や処理/ファイルのまとめ方などが探しても中々見つからなくご教示頂きたく質問させて頂きました。

現在の構成はこんな感じなのですが、何がよくて何が間違っているのかわからない状況です。

■app.js

require('./bootstrap');
window.Vue = require('vue');
/***************************
page
***************************/
Vue.component('top', require('./components/page/Top.vue'));
Vue.component('hoge', require('./components/page/Hoge.vue'));

const top = new Vue({
  el: '#top'
});

■top.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title></title>
  <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>

<body>
  <div id="top">
    <top></top>
  </div>
  <script src=" {{ mix('js/app.js') }} "></script>
</body>

</html>

■Top.vue

<template>
  <div class="l-wrap">
    <hoge></hoge>
  </div>
</template>

<script>
  module.exports = {
    data() {
      return {
      }
    }
  }
</script>

また、laravel側とのデータ受け渡しをする際は、各vueファイルに処理を記載すればいいのでしょうか？
何卒、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

.vueファイルはそのままでは実行できないのでWebpack や Browserify のビルドツールでトランスパイルしたもの(app.js)をブラウザでアクセスできる場所にページ毎に配置するのではないかと思います。

トランスパイルされたものをどこのフォルダに配置するのかは、WebpackやBrowserifyの設定ファイルで指定します。

投稿2018/10/24 17:07

euledge

総合スコア2404

yappi_tengen

2018/10/26 03:50

ベースはlaravelなので、そのままvueを使用しています。

euledge

2018/10/26 04:06

laravel mixに同梱されているwebpackに設定はあるので.vueファイルの置き場所はそこに指定された箇所になりますね。 >laravel側とのデータ受け渡しをする際は、各vueファイルに処理を記載すればいいのでしょうか？ vueのmethodの中でaxiosなどを使ってajaxでデータ取得したものをvueのdataにセットするようなイメージですね。ページの遷移したレンダリング直後のものであれば phpの変数の埋め込みでも可能かもしれませんが、データ受け渡しはajaxでまとめたほうがいいと思います。

yappi_tengen

2018/10/26 04:09

ありがとうございます！ BEとも相談して進めてみます！

行動規範の内容に同意します