Connecting and launching BitrixVue 3

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.

Bitrix Framework