質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.61%

vueとblade(laravel)の共存の仕方について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,560

yappi_tengen

score 21

現在、小~中規模程度の会員制コミュニティサイトを立ち上げています。
FEとBEはそれぞれ別で開発しており、vueとbladeの運用に悩んでいるのでアドバイスを頂けませんでしょうか。

現状は各bladeにそれぞれのインスタンスを生成してpageコンポーネントを置いています。
※top.blade.phpには<div id="top"><top></top></div>など

当たり前なのですが、このやり方だと動作はするのですが、[Vue warn]: Cannot find element: #about などwarnが出てしまいます。

コンポーネントの出し分けやデータの受け渡し観点などからこういう風な構成がいい、その考え方は間違えているなどの意見を頂けましたら幸いです。
よろしくお願い致します。

■app.js

require('./bootstrap');

window.Vue = require('vue');

/***************************
atoms
***************************/
Vue.component('btn_login', require('./components/atoms/Btn_login.vue'));
Vue.component('btn_login_icon', require('./components/atoms/Btn_login_icon.vue'));
Vue.component('btn_regist', require('./components/atoms/Btn_regist.vue'));
Vue.component('logo', require('./components/atoms/Logo.vue'));

/***************************
organisms
***************************/
Vue.component('header_nav', require('./components/organisms/Header_nav.vue'));
Vue.component('header_nav_sp', require('./components/organisms/Header_nav_sp.vue'));
Vue.component('header_menu', require('./components/organisms/Header_menu.vue'));
Vue.component('header_menu_sp', require('./components/organisms/Header_menu_sp.vue'));
Vue.component('footer_nav', require('./components/organisms/Footer_nav.vue'));
Vue.component('login_form', require('./components/organisms/Login_aggre.vue'));
Vue.component('login_form_regist_sp', require('./components/organisms/Login_aggre_regist_sp.vue'));


/***************************
template
***************************/
Vue.component('c-header', require('./components/template/Header.vue'));
Vue.component('c-footer', require('./components/template/Footer.vue'));

/***************************
page
***************************/
Vue.component('top', require('./components/page/Top.vue'));
Vue.component('login', require('./components/page/Login.vue'));
Vue.component('logout', require('./components/page/Logout.vue'));
Vue.component('about', require('./components/page/About.vue'));
Vue.component('privacy', require('./components/page/Privacy.vue'));
Vue.component('terms', require('./components/page/Terms.vue'));
Vue.component('contact', require('./components/page/Contact.vue'));
Vue.component('confirm', require('./components/page/Confirm.vue'));
Vue.component('finish', require('./components/page/Finish.vue'));
Vue.component('notfound', require('./components/page/404.vue'));
Vue.component('reset', require('./components/page/Reset.vue'));
Vue.component('withdraw', require('./components/page/Withdraw.vue'));
Vue.component('register', require('./components/page/Register.vue'));
Vue.component('verify', require('./components/page/Verify.vue'));

/*----------*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

■web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::get('/login/', function () {
  return view('auth/.login');
});

Route::get('/logout/', function () {
  return view('auth/.logout');
});

Route::get('/withdraw/', function () {
  return view('auth/.withdraw');
});

Route::get('/reset/', function () {
  return view('auth/passwords/.reset');
});

Route::get('/register/', function () {
  return view('auth/.register');
});

Route::get('/verify/', function () {
  return view('auth/.verify');
});

Route::get('/about/', function () {
  return view('about/.about');
});

Route::get('/terms/', function () {
  return view('terms/.terms');
});

Route::get('/privacy/', function () {
  return view('privacy/.privacy');
});

Route::get('/contact/', function () {
  return view('contact/.contact');
});

Route::get('/confirm/', function () {
  return view('contact/confirm/.confirm');
});

Route::get('/finish/', function () {
  return view('contact/finish/.finish');
});

Route::get('/404/', function () {
  return view('error/.404');
});

■top.blade.php

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

<head>
  <meta charset="utf-8">
  <meta name="description" content="description">
  <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>top</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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/08 12:14

    実際のコードを提示された方が良いかと

    キャンセル

  • yappi_tengen

    2018/11/08 12:29

    追記致しました!

    キャンセル

回答 1

checkベストアンサー

+1

なんか根本的に間違えてるような…。

app.jsのここは変えなくていいし増やさなくていい。

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

viewのここも変えなくていい。(make:authでのlayouts/app.balde.php)

<div id="app">

</div>

<div id="app">の中ならVueコンポーネントがなんでも使えるように最初から設定済なので自分で何かする必要がない。
Vueコンポーネントを作って、Vue.componentで登録して、<div id="app">内で使うという流れのみ。

<div id="app">
    <top></top>
</div>

top.blade.phpで<html>から書いてるのが間違いの元っぽいので@extendsとか使ってLaravelでの普通の使い方をするのが最初。
https://github.com/laravel/framework/blob/5.7/src/Illuminate/Auth/Console/stubs/make/views/layouts/app.stub

make:auth使われてないことが多いけどLaravelの新規プロジェクト作る時はmake:authまでがセット。これをやらないとVue使うための基本的なviewさえない。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/08 14:17

    非常に適格な回答ありがとうございます! もやもやしていた部分がすっきりしました!

    キャンセル

  • 2018/11/09 10:46

    先日はありがとうございます! ふと思ったのですが、データの受け渡しなどを考慮するとbladeにpageのコンポーネントを埋め込むより直接bladeに書く方がいいのでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る