App.vue 651 B

1234567891011121314151617181920212223242526272829303132
  1. <template>
  2. <div class="app-container">
  3. <Sidebar />
  4. <div class="main-content">
  5. <TopBar />
  6. <div class="content-area">
  7. <router-view v-slot="{ Component }">
  8. <transition name="fade" mode="out-in">
  9. <component :is="Component" />
  10. </transition>
  11. </router-view>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script setup>
  17. import Sidebar from '@/components/layout/Sidebar.vue'
  18. import TopBar from '@/components/layout/TopBar.vue'
  19. </script>
  20. <style scoped>
  21. .fade-enter-active,
  22. .fade-leave-active {
  23. transition: opacity 0.2s ease;
  24. }
  25. .fade-enter-from,
  26. .fade-leave-to {
  27. opacity: 0;
  28. }
  29. </style>