KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Upgraded entries, plugins, router & webpack to vue 3 & typescript

Browse Source
This commit is contained in:
Kevin
2022-08-06 16:14:44 +02:00
parent d279298dec
commit 96c412ca49
11 changed files with 406 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/App.vue
View File

@@ -8,7 +8,10 @@
</div>
<!-- Display the component assigned to the given route (default: home) -->
<router-view class="content" :key="$route.fullPath"></router-view>
<router-view
class="content"
:key="router.currentRoute.value.path"
></router-view>
<!-- Popup that will show above existing rendered content -->
<popup />
@@ -17,61 +20,54 @@
</div>
</template>
<script>
import NavigationHeader from "@/components/header/NavigationHeader";
import NavigationIcons from "@/components/header/NavigationIcons";
import Popup from "@/components/Popup";
import DarkmodeToggle from "@/components/ui/DarkmodeToggle";
<script setup lang="ts">
import { useRouter } from "vue-router";
import NavigationHeader from "@/components/header/NavigationHeader.vue";
import NavigationIcons from "@/components/header/NavigationIcons.vue";
import Popup from "@/components/Popup.vue";
import DarkmodeToggle from "@/components/ui/DarkmodeToggle.vue";
export default {
name: "app",
components: {
NavigationHeader,
NavigationIcons,
Popup,
DarkmodeToggle
}
};
const router = useRouter();
</script>
<style lang="scss">
@import "src/scss/main";
@import "src/scss/media-queries";
@import "src/scss/main";
@import "src/scss/media-queries";
#app {
display: grid;
grid-template-rows: var(--header-size);
grid-template-columns: var(--header-size) 1fr;
@include mobile {
grid-template-columns: 1fr;
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
.navigation-icons-gutter {
position: fixed;
height: 100vh;
margin: 0;
top: var(--header-size);
width: var(--header-size);
background-color: var(--background-color-secondary);
}
.content {
#app {
display: grid;
grid-column: 2 / 3;
grid-row: 2;
z-index: 5;
grid-template-rows: var(--header-size);
grid-template-columns: var(--header-size) 1fr;
@include mobile {
grid-column: 1 / 3;
grid-template-columns: 1fr;
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
.navigation-icons-gutter {
position: fixed;
height: 100vh;
margin: 0;
top: var(--header-size);
width: var(--header-size);
background-color: var(--background-color-secondary);
}
.content {
display: grid;
grid-column: 2 / 3;
grid-row: 2;
z-index: 5;
@include mobile {
grid-column: 1 / 3;
}
}
}
}
</style>