As I delve into learning and practicing Vue.js, my goal is to create a component that includes elements like Navbar and Footer within a single view. Initially, I set up an index for the first view but faced an issue with adding the navbar as it did not show in the index view. Here is my folder structure:
Resource
*js
*spa
*IndexComponent
*HeaderComponent
*app.js
*App.vue
*boostrap.js
Within my IndexComponent file, here is how I structured my code:
<template>
<div class="container.is-fullhd">
<section class="section">
<div class="container is-fluid">
<!-- Rest of the table content goes here -->
</div>
</section>
</div>
</template>
I utilize Vue Router to navigate between pages, where App.vue plays a role in displaying the content. Below is the template used in App.vue:
<template>
<router-view></router-view>
</template>
<script>
export default {
}
</script>
Here are snippets from my app.js and bootstrap.js files:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
// Importing components
import IndexComponent from './components/spa/IndexComponent.vue';
import HeaderComponent from './components/spa/HeaderComponent.vue';
import FooterComponent from './components/spa/FooterComponent.vue';
import AboutComponent from './components/spa/AboutComponent.vue';
// Defining routes
const routes = [
{
name: 'index',
path: '/',
component: IndexComponent
},
{
name: 'about',
path: '/about',
component: AboutComponent
},
];
// Setting up router
const router = new VueRouter({
mode: 'history',
routes: routes
});
// Mounting the app
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');
My question now is, how can I ensure that the navbar remains visible across all views, including when navigating away from the index? Any suggestions on how to achieve this?