Switch to Vue
Now that we know how to create a system with applications, let us rewrite some of the components as a Vue application. This can be done for a Stage and a Widget.
Stages as Vue Application
Let's start with our header stage and rewrite the functionality as Vue application:
stage/header.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 |
|
lang=postcss
As you can see the attribute lang=postcss
was set in the <script>
section. This was done to
make the syntax highlighting and formatting of Visual Code and Vetur work together.
Now we replace in our index.js
the module we import and add only a property type: "vue"
into the
stage definition:
index.js
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 |
|
The header is now a Vue application. The files stage/header.html
, stage/header.css
and
stage/header.js
are not needed anymore.
The Vue application receives the arguments env
and options
now as props:
As plain JS | As Vue |
---|---|
async init(env, options) {} |
props: { env: { ... }, options: { ... } } |
The argument env
has one more property named stage
which points to the stage instance as it
would be if the stage is written in plain JavaScript.
Single root and Multiple roots
As of Vue 3 you are not limited to a single root element in the template anymore. This is an extremely useful feature but within the CodeCoupler system you have to pay attention to the following:
If you are using a single root template you have to set the type to vue
or vue-sr
.
If you are using multiple root elements you have to set the type to vue-mr
.
Widgets as Vue Application
Now let's rewrite one of our widgets as a Vue application:
widgets/testing-visibility.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 |
|
lang=postcss
As you can see the attribute lang=postcss
was set in the <script>
section. This was done to
make the syntax highlighting and formatting of Visual Code and Vetur work together.
Now we replace in our application that uses this widget the module we import, the property type
inside the widget definition and switch from the property widget
to vue
:
apps/testing-buttons.js
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
|
The widget is now a Vue application. The file widgets/testing-visibility.js
is not needed anymore.
The Vue application receives the arguments env
and options
now as props:
As plain JS | As Vue |
---|---|
async init(env, options) {} |
props: { env: { ... }, options: { ... } } |
The argument env
has one more property named widget
which points to a widget instance as it
would be if the widget is written in plain JavaScript.
Single root and Multiple roots
As of Vue 3 you are not limited to a single root element in the template anymore. This is an extremely useful feature but within the CodeCoupler system you have to pay attention to the following:
If you are using a single root template you have to set the type to vue
or vue-sr
.
If you are using multiple root elements you have to set the type to vue-mr
.