Important

You are browsing documentation for version 5.0 of OroCommerce. Support of this version ended in January 2025. Read the documentation for version 6.1 (the latest LTS version) 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 %}
   

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.