Views: 4420
Last Modified: 27.04.2022
First, import BitrixVue from ui.vue3
in your Bitrix Core.js Extension.
Example:
import {BitrixVue} from 'ui.vue3';
BitrixVue.createApp({
data()
{
return {
counter: 0
}
},
mounted()
{
setInterval(() => {
this.counter++
}, 1000)
},
// language=Vue
template: `
Counter: {{ counter }}
`
}).mount('#application');
Important! Higher (and subsequent) articles indicate ES6 syntax and transpiler-based modular system
@bitrix/cli. When you have questions regarding syntax, you can find additional details at the article for
Bitrix Core.js Extension.
To work within a page and scripts without transpiling, use the namespace BX.Vue3
to access the features (e. g., use the namespace BX.Vue3.BitrixVue
for BitrixVue
).
Example:
<?php
\Bitrix\Main\UI\Extension::load("ui.vue3");
?>
<div id="application"></div>
<script type="text/javascript">
BX.Vue3.BitrixVue.createApp({
data()
{
return {
counter: 0
}
},
mounted()
{
setInterval(() => {
this.counter++
}, 1000)
},
// language=Vue
template: `
Counter: {{ counter }}
`
}).mount('#application');
</script>
Options, described in this chapter are available from module version ui 22.100.0.
Note: Bu default, BitrixVue is launched in the
production
mode without hints.
You can find more information about the production mode in article for
DevTools debugging and setup.