Writing Vue Applications
You can write version 3 Vue applications right from the start. If you do so Vue would be compiled
into your final JavaScript file. To avoid this you can use like before a @cc-external
package:
First of all we create a vue file with all the parts we have written separately (HTML, JavaScript,
CSS).
- The HTML part was put into the
<template></template>
section. Only a few small adjustments have
been made here.
- The logic of the class was included in the
<script></script>
section. This part can be written
very briefly. Of course you can use here all proposals as with a regular JavaScript file as
described before.
- The stylesheet was included in the
<style lang="postcss" scoped></script>
section. Please note
the lang="postcss"
attribute. This is useful to work Visual Code validator together in
combination with the the Vetur extension. Of course you can use here all proposals as with a
regular CSS file as described before.
srv/amazing-button.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 | <template>
<div class="amazing-button card h-100">
<div class="card-header">
Amazing Vue Button <i class="fa fa-magic"></i>
</div>
<div class="card-body">
<h5 class="card-title">Click on the button to see the miracle</h5>
<p class="card-text">
<button class="btn btn-secondary" @click="amazingFunction">
Show number from 1 to {{ maximumNumber }}
</button>
</p>
<div class="result border border-primary mb-2">
{{ resultingNumber ?? "No Result" }}
</div>
<img src="logo.png" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
maximumNumber: 9,
resultingNumber: null
};
},
methods: {
amazingFunction() {
this.resultingNumber = Math.floor(Math.random() * this.maximumNumber);
}
}
};
</script>
<style lang="postcss" scoped>
.amazing-button {
--my-color: #f30000;
& .card-header {
color: var(--my-color);
background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position-x: left;
}
& .card-title {
text-decoration: underline;
}
}
</style>
|
We create a class for the sake of simplicity to keep the same interface:
src/amazing-button-vue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | import $ from "jquery";
import { createApp } from "vue";
import AmazonButtonVue from "./amazing-button.vue";
export default class {
get maximumNumber() {
return this.vueApp.maximumNumber;
}
set maximumNumber(value) {
this.vueApp.maximumNumber = value;
}
constructor(element) {
$(element).css({
border: "1px solid red",
textAlign: "center"
});
this.vueApp = createApp(AmazonButtonVue).mount(element);
}
}
|
Now we switch to our new Vue based class in the index.js
:
src/index.js
| import { default as AmazingButton } from "./amazing-button-vue";
let myClass = new AmazingButton(document.getElementById("test-container"));
myClass.maximumNumber = 99;
|
Now you should see the running example in your browser.