SPA Navbar with Laravel and Vue

Question

I am busy building a front-end for a personal project I am working on. The idea is that the user can create entries for certain database tables. The creation of these entries is done using Vue components. Each component corresponds to a table etc. I am using Laravel for the backend with resource controllers to manage the database interactions and data is passed to and from these using Axios (ie I never pass data from Laravel blade to the components).

I would like this to function as an SPA. I am using the Laravel blade files to render all my components however I would like to control this via a Navbar.

<div class="dropdown">
  <button 
    class="btn dropdown-toggle" 
    type="button" id="dropdownMenu2" 
    data-toggle="dropdown" 
    aria-haspopup="true" 
    aria-expanded="false">
     SubMenu1
  </button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
  <button class="btn">Show Component1</button>
  <button class="btn">Show Component2</button>
  <button class="btn">Show Component3</button>
 </div>
</div>

This is a snippet from my navbar. When I click on each of the buttons above I want to render that component without having to reload the entire page. The code below is the home.blade file.

@extends('layouts.app')

@section('content')


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <component1></component1>
            <component2></component2>
            <component3></component3>            
        </div>
    </div>
</div>
@endsection

How can I render each Vue file with a button click from the navbar without reloading the page?

PS I know that I could hack it by passing a variable to each component which I can use to hide or show each component however this would be bad coding practice hence I am looking for a better way.

Answer 1

You just need to use Vue Router, an official plugin which will help you to develop a SPA

https://router.vuejs.org/