dietpi/listas_frontend_nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

separate components

Browse Source
This commit is contained in:
clonbg
2025-08-05 12:18:59 +02:00
parent eb963df89d
commit 8b0499680b
6 changed files with 70 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/app.vue
View File

@@ -1,68 +1,18 @@
<template>
<v-app>
<!-- Toolbar at the top of the screen -->
<v-app-bar color="primary" height="48">
<!-- Title of the application with adjusted margin and font size -->
<v-app-bar-title class="text-h6 ms-3">
<v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
<v-app>
<NavBar />
<span class="ms-1">My Application</span>
</v-app-bar-title>
<!-- Main content of the application -->
<v-main>
<NuxtPage />
<!-- Spacer to push the following elements to the right -->
<v-spacer />
</v-main>
<!-- Menu icons on the right side of the toolbar -->
<v-btn icon="mdi-home" @click="navigateTo('/')"></v-btn>
<AppFooter />
<v-btn
icon="mdi-cube-outline"
@click="navigateTo('/products')"
></v-btn>
<v-btn icon="mdi-email" @click="navigateTo('/contact')"></v-btn>
</v-app-bar>
<!-- Navigation drawer for menu actions -->
<v-navigation-drawer v-model="drawer">
<v-list>
<!-- Menu items in the drawer with icons -->
<v-list-item
@click="navigateTo('/')"
title="Home"
prepend-icon="mdi-home"
></v-list-item>
<v-list-item
@click="navigateTo('/products')"
title="Products"
prepend-icon="mdi-cube-outline"
></v-list-item>
<v-list-item
@click="navigateTo('/contact')"
title="Contact"
prepend-icon="mdi-email"
></v-list-item>
</v-list>
</v-navigation-drawer>
<!-- Main content of the application -->
<v-main>
<NuxtPage />
</v-main>
<!-- Smaller footer at the bottom of the screen -->
<v-footer app color="secondary" height="30">
<v-container class="text-caption text-center">
© {{ new Date().getFullYear() }} My Application - All Rights
Reserved
</v-container>
</v-footer>
</v-app>
</v-app>
</template>
<script setup>
// Drawer state to open/close the navigation drawer
const drawer = shallowRef(false);
<script>
</script>

9
app/components/AppFooter.vue Normal file
View File

@@ -0,0 +1,9 @@
<!-- Smaller footer at the bottom of the screen -->
<template>
<v-footer app color="secondary" height="30">
<v-container class="text-caption text-center">
© {{ new Date().getFullYear() }} SharedLists - All Rights
Reserved
</v-container>
</v-footer>
</template>

36
app/components/NavBar.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<!-- Toolbar at the top of the screen -->
<v-app-bar color="primary" height="48">
<!-- Title of the application with adjusted margin and font size -->
<v-app-bar-title class="text-h6 ms-3">
<v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
<span class="ms-1">My Application</span>
</v-app-bar-title>
<!-- Spacer to push the following elements to the right -->
<v-spacer />
<!-- Menu icons on the right side of the toolbar -->
<v-btn icon="mdi-home" @click="navigateTo('/')"></v-btn>
</v-app-bar>
<!-- Navigation drawer for menu actions -->
<v-navigation-drawer v-model="drawer">
<v-list>
<!-- Menu items in the drawer with icons -->
<v-list-item @click="navigateTo('/')" title="Home" prepend-icon="mdi-home"></v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script setup>
// Drawer state to open/close the navigation drawer
const drawer = shallowRef(false);
</script>
<style>
</style>

23
app/pages/contact.vue
View File

@@ -1,23 +0,0 @@
<template>
<v-container
class="fill-height d-flex flex-column align-center justify-center text-center"
>
<img :src="norrisStore.response.icon_url" alt="chuck norris" />
<v-icon icon="mdi-account-box" size="64"></v-icon>
<div class="mt-3">My Application's Contact Page</div>
<div>
{{ norrisStore.response }}
</div>
</v-container>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useChuckNorris } from "~/stores/chuck";
const norrisStore = useChuckNorris();
onMounted(async () => {
await norrisStore.getData();
console.log(norrisStore.response);
});
</script>

17
app/pages/index.vue
View File

@@ -2,8 +2,21 @@
<v-container
class="fill-height d-flex flex-column align-center justify-center text-center"
>
<v-icon icon="mdi-home" size="64"></v-icon>
<img :src="norrisStore.response.icon_url" alt="chuck norris" size="64" />
<div class="mt-3">My Application's Home Page</div>
<div>
{{ norrisStore.response }}
</div>
</v-container>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useChuckNorris } from "~/stores/chuck";
const norrisStore = useChuckNorris();
onMounted(async () => {
await norrisStore.getData();
console.log(norrisStore.response);
});
</script>

9
app/pages/products.vue
View File

@@ -1,9 +0,0 @@
<template>
<v-container
class="fill-height d-flex flex-column align-center justify-center text-center"
>
<v-icon icon="mdi-cube-outline" size="64"></v-icon>
<div class="mt-3">My Application's Products Page</div>
</v-container>
</template>