Skip to content

Commit 311db08

Browse files
MorgulMorgul
committed
Upgrade to compose API.
1 parent 42ab761 commit 311db08

File tree

12 files changed

+70
-95
lines changed

12 files changed

+70
-95
lines changed

‎src/client/app.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome
1919
import App from './app.vue';
2020

2121
// Pages
22-
import HomePage from './pages/home.vue';
23-
import AboutPage from './pages/about.vue';
22+
import HomePage from './pages/homePage.vue';
23+
import AboutPage from './pages/aboutPage.vue';
2424

2525
// Site Style
2626
import './scss/theme.scss';
@@ -30,7 +30,7 @@ import './scss/theme.scss';
3030
// ---------------------------------------------------------------------------------------------------------------------
3131

3232
library.add(fab, far, fas);
33-
Vue.component('Fa', FontAwesomeIcon);
33+
Vue.component('FaIcon', FontAwesomeIcon);
3434
Vue.component('FaLayers', FontAwesomeLayers);
3535

3636
// ---------------------------------------------------------------------------------------------------------------------

‎src/client/app.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
import Vue from 'vue';
2727
2828
// Components
29-
import SiteHeader from './components/ui/header.vue';
30-
import SiteFooter from './components/ui/footer.vue';
29+
import SiteHeader from './components/ui/siteHeader.vue';
30+
import SiteFooter from './components/ui/siteFooter.vue';
3131
3232
//------------------------------------------------------------------------------------------------------------------
3333

src/client/components/ui/footer.vue renamed to src/client/components/ui/siteFooter.vue

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<template>
66
<footer id="site-footer" class="container text-center">
77
<hr class="mt-0 fancy" />
8-
<div class="mb-2">
8+
<div class="pb-3">
99
Vue-Seed v{{ version }}
1010
</div>
1111
</footer>
@@ -14,26 +14,16 @@
1414
<!--------------------------------------------------------------------------------------------------------------------->
1515

1616
<style lang="scss">
17-
#site-footer {
18-
color: #aaa;
19-
font-size: 12px;
20-
}
17+
#site-footer {
18+
color: #aaa;
19+
font-size: 12px;
20+
}
2121
</style>
2222

2323
<!--------------------------------------------------------------------------------------------------------------------->
2424

25-
<script lang="ts">
26-
//------------------------------------------------------------------------------------------------------------------
27-
28-
export default {
29-
name: 'SiteFooter',
30-
data()
31-
{
32-
return {
33-
version: (window as any).APP_VERSION
34-
};
35-
}
36-
};
25+
<script lang="ts" setup>
26+
const version = (window as any).APP_VERSION;
3727
</script>
3828

3929
<!--------------------------------------------------------------------------------------------------------------------->

src/client/components/ui/header.vue renamed to src/client/components/ui/siteHeader.vue

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<template>
66
<b-navbar toggleable="md" type="dark" variant="dark" sticky>
77
<b-navbar-brand to="/">
8-
<img src="../../assets/images/logo.png" height="32px" style="display: inline-block; margin-top: -5px" alt="logo" />
8+
<img src="/images/logo.png" height="32" class="logo" alt="logo" />
99
Vue-Seed
1010
</b-navbar-brand>
1111
<b-navbar-nav>
@@ -24,17 +24,14 @@
2424
<!--------------------------------------------------------------------------------------------------------------------->
2525

2626
<style lang="scss">
27-
#site-header {}
27+
.logo {
28+
margin-top: -5px;
29+
}
2830
</style>
2931

3032
<!--------------------------------------------------------------------------------------------------------------------->
3133

32-
<script lang="ts">
33-
//------------------------------------------------------------------------------------------------------------------
34-
35-
export default {
36-
name: 'SiteHeader'
37-
};
34+
<script lang="ts" setup>
3835
</script>
3936

4037
<!--------------------------------------------------------------------------------------------------------------------->

‎src/client/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
</head>
2323
<body>
2424
<div id="app"></div>
25-
<script type="module" src="/app.ts"></script>
25+
26+
<!-- Main App Script -->
27+
<script type="module" src="./app.ts"></script>
2628
</body>
2729
</html>

src/client/pages/about.vue renamed to src/client/pages/aboutPage.vue

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<div id="about-page" class="container page">
77
<h1>About this Project</h1>
88
<p>
9-
This is a very simple seed project, intended to provide a framework for a functioning SPA style vue application,
10-
with all the bells and whistles added in. We have font-awesome, BootstrapVue, Vue Class components, etc.
9+
This is a very simple seed project, intended to provide a framework for a functioning SPA style vue
10+
application, with all the bells and whistles added in. We have font-awesome, BootstrapVue, Vue composition
11+
api, etc.
1112
</p>
1213
<p>
1314
You should feel free to take this site as some sane defaults, but feel free to modify it as you see fit.
@@ -17,23 +18,7 @@
1718

1819
<!--------------------------------------------------------------------------------------------------------------------->
1920

20-
<style lang="scss">
21-
#about-page {
22-
}
23-
</style>
24-
25-
<!--------------------------------------------------------------------------------------------------------------------->
26-
27-
<script lang="ts">
28-
//------------------------------------------------------------------------------------------------------------------
29-
30-
import Vue from 'vue';
31-
32-
//------------------------------------------------------------------------------------------------------------------
33-
34-
export default Vue.extend({
35-
name: 'HomePage'
36-
});
21+
<script lang="ts" setup>
3722
</script>
3823

3924
<!--------------------------------------------------------------------------------------------------------------------->

src/client/pages/home.vue renamed to src/client/pages/homePage.vue

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<b-jumbotron header="Vue-Seed" lead="A seed project for TypeScript and Vue.js">
88
<p>You will want to customize this project to fit your needs.</p>
99
<b-button variant="primary" href="https://gitlab.com/morgul/vue-seed/-/blob/master/Readme.md">
10-
<fa icon="book"></fa>
10+
<fa-icon icon="book"></fa-icon>
1111
Documentation
1212
</b-button>
1313
</b-jumbotron>
@@ -37,7 +37,7 @@
3737
</b-card-group>
3838

3939
<h2 class="mt-4">
40-
<fa icon="jedi"></fa> But wait, there's more!
40+
<fa-icon icon="jedi"></fa-icon> But wait, there's more!
4141
</h2>
4242
<p>
4343
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In molestie,
@@ -54,23 +54,7 @@
5454

5555
<!--------------------------------------------------------------------------------------------------------------------->
5656

57-
<style lang="scss">
58-
#main-page {
59-
}
60-
</style>
61-
62-
<!--------------------------------------------------------------------------------------------------------------------->
63-
64-
<script lang="ts">
65-
//------------------------------------------------------------------------------------------------------------------
66-
67-
import Vue from 'vue';
68-
69-
//------------------------------------------------------------------------------------------------------------------
70-
71-
export default Vue.extend({
72-
name: 'HomePage'
73-
});
57+
<script lang="ts" setup>
7458
</script>
7559

7660
<!--------------------------------------------------------------------------------------------------------------------->

‎src/client/scss/_custom.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@
55
//
66
//----------------------------------------------------------------------------------------------------------------------
77

8+
// Disable the bounce effect
9+
html {
10+
overflow: hidden;
11+
height: 100%;
12+
}
13+
14+
body {
15+
height: 100%;
16+
overflow: auto;
17+
}
18+
19+
//----------------------------------------------------------------------------------------------------------------------
20+
821
// Height
922
.h-0 {
1023
height: 0;

‎src/client/vite-env.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue'

‎src/vue-shims.d.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)