'Blank Page with Vuejs and Laravel

Hi I am trying to do the home page with Vuejs so I defined:

  • Layouts folder:

app.blade.php

<!DOCTYPE html>
<html lang="zxx">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Test</title>

  </head>
  <body>
    <div id="app"> 

       @yield('content')

    </div>

  </body>
 </html>

Hi I have my index.blade.php:

@extends('layouts.app')

@section('content')
   <router-view></router-view>
@endsection

I have my router.js like this:

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
function lazyLoad(view){
  return() => import('../views/'+ view +'.vue')
}
export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
 {
   path: '/',
   name: 'home',
   component: lazyLoad('Home')
 }
]
});

I have my Home.vue like this:

<template>
   <div>
      <h1>Hello world</h1>
   </div>

</template>

<script>
   export default {
   
   }
</script>
<style lang="scss">
   @import '~vue-awesome-notifications/dist/styles/style.scss';
</style>

I have my router in laravel like this in web:

 Route::get('/', 'HomeController@index');

I have my controller like this:

  namespace App\Http\Controllers;

  use Illuminate\Http\Request;

 class HomeController extends Controller
 {
/**
 * Show the application dashboard.
 *
 * @return \Illuminate\Contracts\Support\Renderable
 */
 public function index()
 {
    return view('index');
 }
}

When I go to the url I receive a blank page, no errors.. nothing I ran npm run watch and it worked ok it returns this:

   DONE  Compiled successfully in 527ms                                                                           
   11:24:39

   Asset      Size   Chunks             Chunk Names
   /css/app.css   180 KiB  /js/app  [emitted]  /js/app
    0.js  22.6 KiB        0  [emitted]
   + 1 hidden asset

So I wonder what the problem is? why does it display a blank page?

laravelvue.js


Solution 1:[1]

Based on the code you shared, you haven't loaded any javascript files in your HTML. You should add the following line in either one of your blade files: <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

I also don't see you using your router.js-file anywhere, so you could import it in your app.js-file: require('router.js');

If you don't plan on using the existing app.js-file, you could just include router.js in your webpack.mix.js and load it in your HTML.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Michael Grove

Related Questions