CODEWITHSUNDEEP
laravelvue.jssingle-page-application
Igunma Goodness Igudy
Igunma Goodness Igudy

Reputation: 11

My SPA is not working on Laravel 8 and Vue 3

I have a problem with my single page application(SPA) using Vue 3, Vue Router 4 & Laravel 8, my problem is that the components is not loading. I made sure I installed vue-router, I don't know why the code can't run. The links are not even clickable. I have been on this for over 3 days now and still I haven't found the solution to the problem

This is my code. app.js

require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);

Vue.component('home', require('./components/Home.vue').default);
Vue.component('about', require('./components/About.vue').default);
Vue.component('contact', require('./components/Contact.vue').default);

const app = new Vue({
    el: '#app',
    router: new VueRouter(routes)
});

routes.js

import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
export default{
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },

        {
            path: '/about',
            name: 'about',
            component: About
        },

        {
            path: '/contact',
            name: 'contact',
            component: Contact
        }
    ]
}

contact.vue

<template>
    <h1>This is the contact us page.</h1>
</template>
<script>
export default {

}
</script>

about.vue

<template>
    <h1 class="big">This is the about us page.</h1>
</template>
<script>
export default {

}
</script>

home.vue

<template>
    <h1 class="big">This is the home page.</h1>
</template>
<script>
export default {

}
</script>

app.blade.php

    <!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">


    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <div id="app">
            @yield('content')
    </div>
</html>

welcome.blade.php

@extends('layouts.app')
@section('content')
    <router-link class="text-center" to='/'>Home</router-link>
    <router-link class="" to='/about'>About</router-link>
    <router-link class="" to='/contact'>Contact</router-link>
    <router-view></router-view>
@endsection

web.php

<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function(){
    return view('welcome');
})->where('any', '.*');

The links are not clickable

Upvotes: 0

Views: 888

Answers (1)

Zrelli Majdi
Zrelli Majdi

Reputation: 1260

I have removed the extra div that make You confused.

 @extends('layouts.app')
@section('content')
<div id="app">
    <router-link class="text-center" to='/'>Home</router-link>
    <router-link class="" to='/about'>About</router-link>
    <router-link class="" to='/contact'>Contact</router-link>
    <router-view></router-view>
  </div>
@endsection

Upvotes: 0

Related Questions