I am trying to have a router-view and component in my Laravel blade file. The router-view works perfectly and it changes component based on the page URL. However I want to add a <nav></nav> component above my router-view so that I can load in the navigation on each page.
My question is, what is wrong? It doesn't work, currently the <router-view> loads the correct components, however the <nav> does not load anything in.
App.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import {routes} from './routes';
import Nav from './components/Nav.vue';
import store from './store.js';
import axios from 'axios';
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(Vuetify);
Vue.config.productionTip = false;
const router = new VueRouter({
routes,
});
const app = new Vue({
el: '#app',
store,
router,
components: {
Nav
}
});
Master.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="_token" content="{!! csrf_token() !!}"/>
<title>Laravel</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
</head>
<body>
<div id="app">
<nav></nav>
<router-view></router-view>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Nav.vue:
<template>
<div>
<p>hey</p>
</div>
</template>
<script>
export default {
name: "nav"
}
</script>
<style scoped>
</style>
<router-view>loads the correct components, however the<nav>does not load anything in. – Otto