Working on my VueJS project, I've implemented a system to display content based on the user login using Firebase and Vuex state management. When a user is logged in, the content is shown using the v-if directive. Currently, I have successfully placed the NavigationDrawer in the correct position but am facing issues displaying the components accordingly. My objective is to have a fixed NavigationDrawer on the left side and the pages (components) on the right, with navigation handled by VueRouter.
The current layout can be viewed here:
https://i.sstatic.net/vHTBE.png
App.vue
<template>
<v-app>
<v-content v-if="isLoggedIn">
<v-navigation-drawer v-if="isLoggedIn" permanent>
<v-toolbar flat>
<v-list>
<v-list-tile>
<v-list-tile-title class="title">Application</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list dense nav>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-tile>
<v-list-tile-action>
<v-icon>{{item.icon}}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{item.title}}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-content>
<login v-else />
</v-app>
</template>
<script>
import login from "@/views/Login";
export default {
name: "App",
components: {
login
},
data() {
return {
items: [
{ title: "Dashboard", icon: "dashboard" },
{ title: "Settings", icon: "settings" }
]
};
},
computed: {
isLoggedIn() {
return this.$store.getters.user != null;
}
}
};
</script>
router/index.js
import Login from '@/views/Login'
import Dashboard from '@/views/Dashboard'
import Settings from '@/views/Settings'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Settings',
name: 'Settings',
component: Settings
},
{
path: '/Dashboard',
name: 'Dashboard',
component: Dashboard
}
]
export default new VueRouter({
mode: 'history',
routes
})
Settings.vue
<template>
<h1>Settings</h1>
</template>
<script>
export default {
name: "Settings"
};
</script>
Dashboard.vue
<template>
<h1>Dashboard</h1>
</template>
<script>
export default {
name: "Dashboard"
};
</script>
<style>
</style>