PHPackages                             denx-b/bitrix-vue-component - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. denx-b/bitrix-vue-component

ActiveLibrary[Utility & Helpers](/categories/utility)

denx-b/bitrix-vue-component
===========================

Connecting vue components in the bitrix

1.1.1(2y ago)5053619MITPHPPHP ^7.0||^8.0

Since Dec 9Pushed 2y ago9 watchersCompare

[ Source](https://github.com/denx-b/bitrix-vue-component)[ Packagist](https://packagist.org/packages/denx-b/bitrix-vue-component)[ RSS](/packages/denx-b-bitrix-vue-component/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (17)Used By (0)

Bitrix Vue Component
--------------------

[](#bitrix-vue-component)

Для использования Vue.js в 1С-Битрикс с данной библиотекой вам не потребуется установленный node.js и никаких зависимостей для сборки, потому что вся "магия" происходит полностью на php.
Пишите vue-компоненты на JavaScript и подключайте их одной строкой `Vue::includeComponent(['comp1', 'comp2', ...])`и используйте компоненты в приложении `` как обычно.

```

  var mainVueApp = new Vue({
    el: '#app'
  })

```

```
# /local/components-vue/todo-list/template.vue:

            {{ todo.text }}

  Vue.component('todo-list', {
    template: '#todo-list',
    data: function () {
      return {
        todos: [
          {text: 'Изучить JavaScript'},
          {text: 'Изучить Vue'},
          {text: 'Создать что-нибудь классное'}
        ]
      }
    }
  })

```

### Структура компонентов

[](#структура-компонентов)

```
/*
local/
└─ components-vue/
    ├─ component-one/
    |   ├─ .settings.php
    |   ├─ template.vue
    |   ├─ script.js
    |   └─ style.css
    ├─ component-two/
    |   └─ template.vue
    └─ component-three/
        └─ script.js
*/

```

По схеме видно, что весь компонент может быть описан в одном script.js или в одном template.vue файле.
С реализацией того или иного способа разработчики Vue.js [хорошо знакомы](https://ru.vuejs.org/v2/guide/components.html).

Примеры с демо сайта:

- [только template.vue](https://github.com/denx-b/bitrix-vue-component-demo/tree/master/local/components-vue/simple-block)
- [только script.js](https://github.com/denx-b/bitrix-vue-component-demo/tree/master/local/components-vue/dbogdanoff-loader)
- [шаблон в template.vue, а регистрация компонента в script.js](https://github.com/denx-b/bitrix-vue-component-demo/tree/master/local/components-vue/upload-photo)

При наличии минифицированных стилей или скриптов, в папке компонента, и установленной соответствующей опции в главном модуле, будут подключены минифицированные файлы.

В .settings.php могут быть указаны дополнительные зависимости, которые будут автоматически подключены при подключении компонента:

```