Bitrix Framework

  Component naming

It's recommended to allocate Vue components in the folder components at the first level of module JS extensions, for example, /modules/timeman/install/js/timeman/components/.

If your component uses Vue as template engine and all logic is located in JS extension, then Vue component is located in the folder src/components.

  Naming local component

export const Component = {...};

Variable for export shouldn't contain the module, only the component name in PascalCase.

Registering local components in target component looks as follows:

import {ComponentName} from './component/name';
import {ComponentSubName} from './component/subname';

export const BaseComponent = {
	...
	components:
	{
		ComponentName,
		ComponentSubName
	},
	...
	// language=Vue
	template: `
        <ComponentName/>
        <ComponentSubName/>
	`
};

Please note, component is named in the template's PascalCase the same as you have indicated during import.

Such notation allows to understand at superficial glance which components are local and which are global.

Additionally, by name searching you can easily find a necessary object in the import and can switch to its source code.

  Naming a mutable component

export const ComponentName = BitrixVue.mutableComponent('module-component-name', {
	...
});

Component name must start from the module name and end by the component name in kebab-case.

Export variable is generated the same as for the local component.

Examples for naming, depending on the location:

• /modules/timeman/install/js/timeman/components/schedule/ – component name is timeman-schedule;
• /modules/im/install/js/im/components/dialog/list/ – component name is im-dialog-list;
• /modules/ui/install/js/ui/vue/components/hint/ – component name is ui-hint;
• /modules/ui/install/js/ui/picker/src/components/selector.js – component name is ui-picker-selector.

Such name allows avoiding collisions between modules and quickly find a needed component if required.

When your module has components for two framework versions, you need to directly designate the version to prevent confusion when connecting.