Skip to content

Commit 422027a

Browse files
author
Günter Schafranek
committed
fix: Fixed usage of vue-facing-decorator
- ... by using `toNative()` - fixes #39
1 parent d0ba477 commit 422027a

File tree

5 files changed

+58
-52
lines changed

5 files changed

+58
-52
lines changed

‎src/app.vue

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
11
<template>
2-
<div>
3-
<div class="main">
4-
<img src="./assets/logo.png">
5-
<h1>{{ title }}!</h1>
6-
<router-link
7-
tag="button"
8-
:to="{ 'name': 'essential' }"
9-
>
10-
Essential
11-
</router-link>
12-
<router-link
13-
tag="button"
14-
:to="{ 'name': 'ecosystem' }"
15-
>
16-
Ecosystem
17-
</router-link>
2+
<div>
3+
<div class="main">
4+
<img src="./assets/logo.png">
5+
<h1>{{ title }}!</h1>
6+
<router-link
7+
tag="button"
8+
:to="{ 'name': 'essential' }"
9+
>
10+
Essential
11+
</router-link>
12+
<router-link
13+
tag="button"
14+
:to="{ 'name': 'ecosystem' }"
15+
>
16+
Ecosystem
17+
</router-link>
1818

19-
<Dialog
20-
v-model:visible="display"
21-
header="Header"
22-
>
23-
Content
24-
</Dialog>
25-
<router-view />
26-
<div>&copy; {{ new Date().getFullYear() }}</div>
27-
</div>
28-
</div>
19+
<Dialog
20+
v-model:visible="display"
21+
header="Header"
22+
>
23+
Content
24+
</Dialog>
25+
<router-view />
26+
<div>&copy; {{ new Date().getFullYear() }}</div>
27+
</div>
28+
</div>
2929
</template>
3030

3131
<script lang="ts">
32-
import { Component, Vue } from 'vue-facing-decorator';
33-
34-
32+
import { Component, Vue, toNative } from 'vue-facing-decorator';
3533
3634
@Component
37-
export default class App extends Vue {
38-
title = 'Parcel-Vue-Ts';
39-
display = true;
35+
class App extends Vue {
36+
title = 'Parcel-Vue-Ts';
37+
display = true;
4038
}
39+
40+
//Transform class component to vue native component
41+
export default toNative(App)
4142
</script>
4243

4344
<style lang="scss">

‎src/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
</head>
1010

1111
<body>
12-
<app></app>
12+
<app id="app"></app>
1313
<script type="module" src="./index.ts"></script>
1414
</body>
1515

16-
</html>
16+
</html>

‎src/index.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { createApp } from 'vue';
44
import App from './app.vue';
55
import router from "./router";
66

7-
import 'primevue/resources/themes/saga-blue/theme.css';
8-
import 'primevue/resources/primevue.min.css';
97
import 'primeicons/primeicons.css';
8+
import 'primevue/resources/primevue.min.css';
9+
import 'primevue/resources/themes/saga-blue/theme.css';
1010
import store from './store/index';
1111

1212
const app = createApp(App);
@@ -15,7 +15,8 @@ app.use(PrimeVue);
1515
app.use(router);
1616
app.use(store);
1717

18+
// eslint-disable-next-line vue/no-reserved-component-names
1819
app.component('Dialog', Dialog);
1920

20-
app.mount('app')
21+
app.mount('#app')
2122

‎src/views/ecosystem.vue

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
<template>
2-
<ul class="ecosystem">
3-
<li
4-
v-for="item in list"
5-
:key="item.label"
6-
>
7-
<a
8-
:href="item.link"
9-
target="_blank"
10-
>{{ item.label }}</a>
11-
</li>
12-
</ul>
2+
<ul class="ecosystem">
3+
<li
4+
v-for="item in list"
5+
:key="item.label"
6+
>
7+
<a
8+
:href="item.link"
9+
target="_blank"
10+
>{{ item.label }}</a>
11+
</li>
12+
</ul>
1313
</template>
1414

1515
<script lang="ts">
1616
import { Link } from '@/models/link.type';
17-
import { Component, Vue } from 'vue-facing-decorator';
17+
import { Component, Vue, toNative } from 'vue-facing-decorator';
1818
import { State } from 'vuex-facing-decorator';
1919
2020
@Component
21-
export default class Ecosystem extends Vue
21+
class Ecosystem extends Vue
2222
{
2323
@State('ecosystem') public list: Link[] = [];
2424
}
25+
26+
export default toNative(Ecosystem);
2527
</script>
2628

2729
<style lang="scss" scoped>

‎src/views/essential.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
</template>
1717
<script lang="ts">
1818
19-
import { Component, Vue } from 'vue-facing-decorator';
19+
import { Component, Vue, toNative } from 'vue-facing-decorator';
2020
import { Link } from '../models/link.type';
2121
2222
@Component
23-
export default class Essential extends Vue
23+
class Essential extends Vue
2424
{
2525
public list: Link[] = [{ label: 'Core Docs', link: 'https://vuejs.org' },
2626
{ label: 'Forum', link: 'https://forum.vuejs.org' },
@@ -31,6 +31,8 @@ export default class Essential extends Vue
3131
console.log('Essential created');
3232
}
3333
}
34+
35+
export default toNative(Essential);
3436
</script>
3537

3638
<style lang="scss" scoped>

0 commit comments

Comments
 (0)