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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

1668閲覧

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

yappi_tengen

総合スコア23

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/11/08 02:59

編集2018/11/08 03:28

現在、小~中規模程度の会員制コミュニティサイトを立ち上げています。
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/08 03:14

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

回答1

0

ベストアンサー

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

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 05:10

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yappi_tengen

2018/11/08 05:17

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

2018/11/09 01:46

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問