Skip to content

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:

1
npm i @cc-external/vue

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

1
2
3
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.

Back to top