現在、小~中規模程度の会員制コミュニティサイトを立ち上げています。
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>
回答1件
あなたの回答
tips
プレビュー