I have this laravel app where I converted the blade files to vue.js files. I got this to work except that I couldn't get the navigation section on the vue file to display.
This is the code of the blade layout file:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="SmartWealth helps you take charge of your financial well being by making it easy to save and invest towards meeting your life-stage goals.">
<meta name="keywords" content="smartwealth,finance,personal finance,fintech,investment,save,stock market">
<meta name="google-site-verification" content="kI2nwnIamrPbcAFSVICnnFmdJQxOZc2b7jvftnChRME" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Quicksand" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="shortcut icon" type="image/x-icon" href="{{ asset('img/favicon.png') }}">
<title>SmartWealth: {{ $title }}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light t-navbar fixed-top">
<a class="navbar-brand" href="{{ route('index') }}"><img src="{{ asset('img/logo.svg') }}" class="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item {{ Request::is('/') ? 'active' : '' }}">
<a class="nav-link" href="{{ route('index') }}">Home</a>
</li>
<li class="nav-item {{ Request::is('howitworks') ? 'active' : '' }}">
<a class="nav-link" href="{{ route('howitworks') }}">How It Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://app.smartwealthadvisors.com/getstarted">Risk Assessment</a>
</li>
<li class="nav-item {{ Request::is('resources') ? 'active' : '' }}">
<a class="nav-link" href="{{ route('resources') }}">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://app.smartwealthadvisors.com">Login</a>
</li>
</ul>
</div>
</nav>
@yield('content')
<footer class="bg-footer">
<div class="container ptop-m pbtm-s">
<div class="row">
<div class="col-lg-3 col-md-6 ptop-s">
<img src="img/logo-g.svg" style="height: 5rem;">
<div class="ptop-s">
<a href="https://www.facebook.com/Smartwealthng/"><span class="social"><i class="fa fa-facebook-f fa-lg"></i></span></a>
<a href="https://twitter.com/smartwealthng"><span class="social"><i class="fa fa-twitter fa-lg"></i></span></a>
<a href="https://www.instagram.com/smartwealthng/"><span class="social"><i class="fa fa-instagram fa-lg"></i></span></a>
<a href="https://www.linkedin.com/company/smartwealth-advisors"><span class="social"><i class="fa fa-linkedin fa-lg"></i></span></a>
</div>
</div>
<div class="col-lg-3 col-md-6 ptop-s">
<h4>Company</h4>
<li><a href="{{ route('about') }}">About SmartWealth</a></li>
<li><a href="{{ route('investmentapproach') }}">Investment Approach</a></li>
<li><a href="{{ route('purposefulcapitalism') }}">Purposeful Capitalism</a></li>
<li><a href="{{ route('pricing') }}">Pricing</a></li>
</div>
<div class="col-lg-3 col-md-6 ptop-s">
<h4>Legal</h4>
<li><a href="{{ route('privacy') }}">Privacy Policy</a></li>
<li><a href="{{ route('terms') }}">Terms of Service</a></li>
</div>
<div class="col-lg-3 col-md-6 ptop-s">
<h4>Contact</h4>
<li>Plot 19B, Block 3, Crospil Estate, Anansa Road, Calabar, Cross River State.</li>
<li>+234 8033587748</li>
<p>connect@smartwealthadvisors.com</p>
</div>
</div>
<hr>
<h6>Disclosure</h6>
<p>
SmartWealth is subject to an Investment Advisory Agreement
(IAA) and designed primarily for long-term investors. Investing involve risks, including the possible loss of your capital. You should
not enter into any transactions unless you have fully understood all such risks and have independently determined that such
transactions are appropriate for you. Any discussion of the risks contained herein with respect to any security should not be
considered to be a disclosure of all risks or complete discussion of the risks which are mentioned. Past performance does not
guarantee future returns. Historical and expected returns projections are provided for informational and illustrative purposes
and may not reflect actual future performances.
</p>
<p>
SmartWealth is a web-based service designed to assist clients in achieving discrete financial goals. It is not intended to
provide comprehensive tax advice or financial planning with respect to every aspect of a client's financial situation and do not
incorporate specific investments that clients hold elsewhere. You should not construe any of the material contained herein as
comprehensive business, hedging, legal, regulatory, tax, or accounting advice and you may want to consult your business advisor,
attorney, and tax and accounting advisors concerning any such contemplated transactions. See Terms of Service for full disclosures.
</p>
<p class="ptop-m">
© Ifriqiya Limited <?php echo date('Y') ?>. All rights reserved.
</p>
</div>
</footer>
<!-- Scripts -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
It gives this result 
It works for mobile also 
This the code after I converted to vue:
<template>
<div>
<Head :title="title" />
<!-- Page Heading -->
<nav class="navbar navbar-expand-lg navbar-light t-navbar fixed-top">
<Link class="navbar-brand" :href="route('welcome')">
<img src="img/logo.svg" class="logo" />
</Link>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<Link
class="nav-link"
:href="route('welcome')"
:class="{ active: $page.url === '/' }"
>Home</Link
>
</li>
<li class="nav-item">
<Link
class="nav-link"
:href="route('howitworks')"
:class="{ active: $page.url === '/howitworks' }"
>How It Works</Link
>
</li>
<li class="nav-item">
<Link class="nav-link" :href="route('register')">Register</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
:href="route('resources')"
:class="{ active: $page.url === '/resources' }"
>Resources</Link
>
</li>
<li class="nav-item">
<Link class="nav-link" :href="route('login')">Login</Link>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<main>
<slot></slot>
</main>
<!-- Page Footer -->
<footer class="bg-footer">
<div class="container ptop-m pbtm-s">
<div class="row">
<div class="col-lg-3 col-md-6 ptop-s">
<img src="img/logo-g.svg" style="height: 5rem" />
<div class="ptop-s">
<a href="https://www.facebook.com/Smartwealthng/"
><span class="social"><i class="fa fa-facebook-f fa-lg"></i></span
></a>
<a href="https://twitter.com/smartwealthng"
><span class="social"><i class="fa fa-twitter fa-lg"></i></span
></a>
<a href="https://www.instagram.com/smartwealthng/"
><span class="social"><i class="fa fa-instagram fa-lg"></i></span
></a>
<a href="https://www.linkedin.com/company/smartwealth-advisors"
><span class="social"><i class="fa fa-linkedin fa-lg"></i></span
></a>
</div>
</div>
<div class="col-lg-3 col-md-6 ptop-s">
<h4>Company</h4>
<li>
<Link :href="route('about')">About SmartWealth</Link>
</li>
<li>
<Link :href="route('investmentapproach')">Investment Approach</Link>
</li>
<li>
<Link :href="route('purposefulcapitalism')">Purposeful Capitalism</Link>
</li>
<li>
<Link :href="route('pricing')">Pricing</Link>
</li>
</div>
<div class="col-lg-3 col-md-6 ptop-s">
<h4>Legal</h4>
<li>
<Link :href="route('policy')">Privacy Policy</Link>
</li>
<li>
<Link :href="route('terms')">Terms of Service</Link>
</li>
</div>
<div class="col-lg-3 col-md-6 ptop-s">
<h4>Contact</h4>
<li>
Plot 19B, Block 3, Crospil Estate, Anansa Road, Calabar, Cross River State.
</li>
<li>+234 8033587748</li>
<p>connect@smartwealthadvisors.com</p>
</div>
</div>
<hr />
<h6>Disclosure</h6>
<p>
SmartWealth is subject to an Investment Advisory Agreement (IAA) and designed
primarily for long-term investors. Investing involve risks, including the
possible loss of your capital. You should not enter into any transactions unless
you have fully understood all such risks and have independently determined that
such transactions are appropriate for you. Any discussion of the risks contained
herein with respect to any security should not be considered to be a disclosure
of all risks or complete discussion of the risks which are mentioned. Past
performance does not guarantee future returns. Historical and expected returns
projections are provided for informational and illustrative purposes and may not
reflect actual future performances.
</p>
<p>
SmartWealth is a web-based service designed to assist clients in achieving
discrete financial goals. It is not intended to provide comprehensive tax advice
or financial planning with respect to every aspect of a client's financial
situation and do not incorporate specific investments that clients hold
elsewhere. You should not construe any of the material contained herein as
comprehensive business, hedging, legal, regulatory, tax, or accounting advice
and you may want to consult your business advisor, attorney, and tax and
accounting advisors concerning any such contemplated transactions. See Terms of
Service for full disclosures.
</p>
<p class="ptop-m">
© Ifriqiya Limited {{ currentYear }}. All rights reserved.
</p>
</div>
</footer>
</div>
</template>
<script setup>
import { Head, Link } from "@inertiajs/inertia-vue3"
import { computed, onMounted } from "vue"
import "/public/css/styles.css"
defineProps({
title: String,
currentYear: String
})
const currentYear = computed(() => {
return new Date().getFullYear()
})
const scripts = [
"https://code.jquery.com/jquery-3.3.1.slim.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js",
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
]
onMounted(() => {
let index = 0
function loadNextScript() {
if (index >= scripts.length) return
let script = scripts[index]
let tag = document.createElement("script")
tag.setAttribute("src", script)
tag.setAttribute("async", true)
tag.onload = loadNextScript
document.head.appendChild(tag)
index++
}
loadNextScript()
})
</script>
<style scoped>
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css";
@import "https://fonts.googleapis.com/css?family=Open+Sans:700|Quicksand:400";
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
#navbarNavDropdown li a.active {
color: #3869d4;
}
</style>
Page works except the navigation section which is blank: 
It doesn't work on mobile either 
What can I do to resolve this?
