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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

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

Q&A

0回答

949閲覧

Laravel Bladeでの Auth 認証後に Vue作成のSPAにアクセスしたい

laravel_user

総合スコア0

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

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

0グッド

0クリップ

投稿2021/06/18 03:48

編集2021/06/18 03:49

前提・実現したいこと

LaravelとVue.jsを使用してWebアプリを作成しています
ログイン認証をLaravelのAuth機能+login.Blade.phpを使用(Vueは全く使用せず)
認証後はVueでのSPAという仕様にしたいです
・未ログイン時はLaravelのLogin.blade.phpのログイン画面に遷移
・ログイン後はindex.Blade.php+<div id="app">内にApp.vueファイルの内容を表示
といった流れです

発生している問題・エラーメッセージ

ログインしていない状態でアクセスすると一瞬Login.blade.phpが表示されるのですがすぐに画面遷移してしまい、ログインしていないままApp.vueだけの内容が表示されます
urlはlocalhost:8000/login表示のままです
bodyタグの中にApp.vueの内容だけが入ってしまっています
(bladeの内容は表示されず<h3>Laravel</h3>の内容が消えています)
Laravel.mixでコンパイルしたcssとjsファイルは<head>, <script>内に入っています

直接 /login, /register, /password/resetにアクセスしても同様でした

エラーメッセージがどこにもでないので修正の検討がついていません
laravel-debugbarを使用していますが、viewsタブにauth.loginを読み込んでいる表示のみで他タブにもエラーは見当たりません
Chrome デベロッパーツールでもエラーは表示されません

過去のコマンドは入力済みです
composer require laravel/ui:^1.0 --dev
php artisan ui vue --auth
npm install
npm install --save vue-router

足りない情報等あるかと思いますが、お手をお借りできれば幸いです

該当のソースコード

php

1// routes/web.php 2Auth::routes(); 3 4Route::get('/{any}', function () { 5 return view('index'); 6})->where('any', '.*')->middleware('auth');

php

1// app/resources/views/index.blade.php 2<!DOCTYPE html> 3<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <title>{{ config('app.name', 'App') }}</title> 12 13 {{-- css ファイル --}} 14 <link rel="stylesheet" href="{{ asset('css/app.css') }}" rel="stylesheet"> 15</head> 16<body> 17 18<h3>Laravel</h3> 19<div id="app" v-cloak></div> 20 21{{-- js ファイル --}} 22<script src="{{ asset('js/app.js') }}" defer></script> 23</body> 24</html>

js

1// resources/js/app.js 2require('./bootstrap'); 3 4window.Vue = require('vue'); 5 6import Vue from 'vue' 7import App from './App.vue' 8 9const app = new Vue({ 10 el: '#app', 11 components: { App }, 12 template: '<App />', 13})

vue

1// resources/js/App.vue 2<template> 3 <div> 4 <h3>App.vue</h3> 5 </div> 6</template>

試したこと

変更をいろいろなところでして、把握しきれていなかったので
最小限(ui, auth, npm)のみインストールした新しいLaravelプロジェクトで上記の該当ソースコードを入力しても同じ遷移が起こってしまいました
変更したのは
resources/views/index.blade.php
resources/js/app.js
resources/js/App.vue
routes/web.php
のみです
表示されるのはbody内の

<h3>App.vue</h3>のみです

他を触っても変化がなかったのですが、
app.jsでのtemplate: '<App />'をコメントアウトするとログイン画面が表示されログインできるようになりました
/registerにも同様にアクセスでき、ユーザー登録も行われます
ですが、App.vueを使用していないのでindex.blade.phpの表示のみで<div id="app"></div>にはvueの内容は反映されません
表示されるのはbody内の

<h3>Laravel</h3>のみです

補足情報(FW/ツールのバージョンなど)

使用環境
Laravel Framework 6.20.27
PHP 7.3.15
node 14.16.0
Vue 2.5.17
Google Chrome 91.0.4472.106
XAMPP v3.2.4

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問