前提・実現したいこと
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内の
他を触っても変化がなかったのですが、
app.jsでのtemplate: '<App />'をコメントアウトするとログイン画面が表示されログインできるようになりました
/registerにも同様にアクセスでき、ユーザー登録も行われます
ですが、App.vueを使用していないのでindex.blade.phpの表示のみで<div id="app"></div>にはvueの内容は反映されません
表示されるのはbody内の
補足情報(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
あなたの回答
tips
プレビュー