Working on my first SPA with laravel, vue, vuex, & vue-router. I have a MainApp.vue(to to house the whole app), Header.vue, and a Dashboard.vue component. The Header.vue is being rendered twice in the browser.
//MainApp.vue
<template>
<div id="main">
<Header />
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Header from './Header.vue'
export default {
name: 'main-app',
components: {
Header
}
}
</script>
The app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes';
import MainApp from './components/MainApp.vue';
import Header from './components/Header.vue';
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: 'history'
});
const app = new Vue({
el: '#app',
router,
components: {
MainApp,
Header
}
});
the body of the welcome.blade.php
<body style="font-family: 'Rajdhani', sans-serif;">
<div id="app">
<main-app />
</div>
<!-- Scripts -->
<script async src=""></script>
<script src="" ></script>
<script src="" ></script>
<script src="" ></script>
<script src="" ></script>
</body>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire