Important

We are updating the images for OroCommerce version 6.1 to align with the latest changes in the back-office design. During this transition, some images may still show older versions. Thank you for your patience as we work to update all visuals to reflect these changes.

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 %}
   

8. 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.