Important

You are browsing upcoming documentation for version 5.1 of OroCommerce, OroCRM, and OroPlatform, scheduled for release in March 2023. Read version 5.0 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Customize Framework Setup Components

Oro provides the ability to integrate Vue/React libraries and create your custom micro-application. You can use data-page-component-vue-app or data-page-component-react-app for Vue and React, respectively, which will enable you to create and run a mini-app in its basic form.

A Vue/React application may often need more flexible customization or the addition of some third-party libraries to extend the standard functionality of the application.

We are going to illustrate how to do it with an example of a component for Vue. As an example, let’s add a manager for the state to the mini-application.

  1. Create a module with Store. Remember to export the created store so that it can be later connected to the application.

    src/{YourBundleName}/Resources/public/js/vue/store/index.js
      import { createStore } from 'vuex';
    
      const store = createStore({
          state () {
              return {
                  count: 0
              }
          },
          mutations: {
              increment (state) {
                  state.count++
              }
          }
      });
    
      export default store;
    
  2. Create a file to extend the functionality in your bundle.

    src/{YourBundleName}/Resources/public/js/app/components/custom-vue-app-component.js
      import VueAppComponent from 'oroui/js/app/components/vue-app-component';
      import store from '../../vue-app/store';
    
      const CustomVueAppComponent = VueAppComponent.extend({
          constructor: function CustomVueAppComponent(...args) {
              CustomVueAppComponent.__super__.constructor.apply(this, args);
          },
    
          beforeAppMount() {
              this.app.use(store);
          }
      });
    
      export default CustomVueAppComponent;
    
  3. Create a shortcut that enables you to use the page component and Twig templates. Create an app-module to do this. To learn more about shortcuts, see the Component Shortcuts topic.

    src/{YourBundleName}/Resources/public/js/app/modules/custom-vue-module.js
      import ComponentShortcutsManager from 'oroui/js/component-shortcuts-manager';
    
      ComponentShortcutsManager.add('custom-vue-app', {
          moduleName: '{yourbundlename}/js/app/components/custom-vue-app-component',
          scalarOption: 'vueApp'
      });
    
  4. Register the new module as app-module and create a yaml config file. See App Modules for more information.

    src/{YourBundleName}/Resources/views/layouts/{theme}/config/jsmodules.yml
      app-modules:
          - {yourbundlename}/js/app/modules/custom-vue-module
      dynamic-imports:
          acmevueapp:
              - {yourbundlename}/js/app/components/custom-vue-app-component
    
  5. You can now use the new shortcut in Twig.

    src/{YourBundleName}/Resources/views/layout.html.twig
      {% block _custom_block_widget %}
          {% set attr = layout_attr_defaults(attr, {
              'data-page-component-custom-vue-app': {
                  vueApp: '{yourbundlename}/js/vue-app/App'
              }
          }) %}
    
          <div {{ block('block_attributes') }}>
              {{ block_widget(block) }}
          </div>
      {% endblock %}
    
  1. Register your new widget and append it to the page container in the layout. For this, create a file. For more information on the layout update, see the Layout topic.

    src/{YourBundleName}/Resources/views/layouts/{theme}/layout.yml
      layout:
          actions:
              - '@setBlockTheme':
                  themes: 'layout.html.twig'
    
              - '@add':
                  id: custom_block
                  parentId: page_container
                  prepend: true
                  blockType: block
    

    Note

    You can use a similar approach for React.