How to Use Magento With Bootstrap, React, and Vue.js

Magento is one of the leading e-commerce frameworks. It provides so many features out of the box, making it everything any merchant or seller might need. However, development in Magento can be a hassle, as it is not easy to learn and it's not easy to integrate with some of the leading frontend frameworks or libraries.

In this tutorial, we'll go over how to use Bootstrap, React, and Vue.js with Magento 2.

Prerequisites: Create a Theme

This tutorial will add the libraries or frameworks in a new theme. However, if you need to add them to a module it's pretty much the same process.

If you don't have a theme created, we'll quickly go over how to create a theme. First, create the directory app/design/frontend/VENDOR/THEME_NAME where VENDOR is your own company or your name, and THEME_NAME is the name of the theme.

Then, in the theme directory create the file theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>THEME_NAME</title>
    <parent>Magento/blank</parent>
</theme>

Make sure to change THEME_NAME to the name of your theme.

Then, create the file registration.php:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/VENDOR_NAME/THEME_NAME', __DIR__);

Make sure to change VENDOR_NAME and THEME_NAME accordingly.

Finally, create composer.json:

{
    "name": "VENDOR_NAME/THEME_NAME",
    "description": "N/A",
    "type": "magento2-theme",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "config": {
        "sort-packages": true
    },
    "version": "100.4.2",
    "require": {
        "php": "~7.3.0||~7.4.0",
        "magento/framework": "103.0.*"
    },
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Again, make sure to change VENDOR_NAME and THEME_NAME accordingly.

Now go to your Magento admin and login. Then, go to Content -> Configuration. Click on Edit for the Default Store View. Now, choose your theme from the "Applied Theme" dropdown and click Save Configuration.

Using Bootstrap with Magento

Bootstrap is one of the most famous CSS libraries out there. Bootstrap is used in so many websites that we use every day. Using it makes web development easier, so figuring out how to use it with Magento is useful.

There's a small difference between using Bootstrap 5 and prior versions. I'll point it out when we get to it.

First, download Bootstrap with the version you want. If you are downloading Bootstrap v5.x, you need to download Popper.js version 2. However, if you are downloading Bootstrap v4.6 or earlier, you need to download Popper.js version 1.

Then, extract the downloaded Bootstrap ZIP. It will have css and js directories. Move css/bootstrap.min.css to your theme directory and place it in THEME_NAME/web/css. Also, move js/bootstrap.min.js to your theme directory and place it in THEME_NAME/web/js. Finally, place popper.min.js that you downloaded in THEME_NAME/web/js.

Then, in the root of the theme directory create requirejs-config.js. The content will be slightly different depending on the version of Bootstrap you're using.

If you're using Bootstrap >= 5.0:

var config = {
    shim:{
        bootstrap: {
            deps: ['jquery', '@popperjs/core']
        }
    },
    map: {
        '*': {
            bootstrap: 'js/bootstrap.min',
            '@popperjs/core': 'js/popper.min'
        }
    }
};

If you're using prior versions:

var config = {
    shim:{
        bootstrap: {
            deps: ['jquery', 'popper.js']
        }
    },
    map: {
        '*': {
            bootstrap: 'js/bootstrap.min',
            'popper.js': 'js/popper.min'
        }
    }
};

The reason behind the difference is that in Bootstrap 5, bootstrap.min.js requires @popperjs/core, whereas in prior versions bootstrap.min.js requires popper.js.

If you're not familiar with what requirejs-config.js does, it basically defines the scripts for later use in our theme or module using RequireJS. the map key allows us to define the libraries we want to use under certain keys to refer to them in other places. shim allows defining what the library might depend on. In Bootstrap's case, it depends on jQuery and Popper.js

The next step is adding the CSS file for Bootstrap in the head tag of our pages. To do that, create in your theme's directory the file Magento_Theme/layout/default_head_block.xml with the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/bootstrap.min.css" />
    </head>
</page>

Let's test that both the CSS file and JS files are working correctly. Create in your theme's directory the file Magento_Theme/layout/default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block name="test-bootstrap" class="Magento\Framework\View\Element\Template" template="Magento_Theme::test-bootstrap.phtml" />
        </referenceContainer>
    </body>
</page>

This will add a block to the content container of our pages. Then, create the file Magento_Theme/templates/test-bootstrap.phtml with the following content:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Hover me
</button>
<script>
    require(['jquery', 'bootstrap'], function ($) {
        $('[data-bs-toggle="tooltip"]').tooltip();
    });
</script>

This will show a button with a tooltip, which will test both Bootstrap and Popper's functionalities.

The integration with Bootstrap is done now. To test it out, first, use setup:static-content:deploy command after clearing the var/cache, var/view_preprocessed, var/page_cache, generated, and pub/static/frontend directories:

php bin/magento setup:static-content:deploy -f

Recommended read - Learn how to compile front-end changes in Magento 2 easily: How to Make Your Front-End Development Faster in Magento 2 Using Grunt

If you go now to the home page, you should see a button that will show a tooltip when you hover it.

Using React with Magento

In this tutorial, we'll cover the easiest way to integrate React with Magento. If you search a little online, you'll find a lot of methods using Grunt and other methods. In this one, we'll show the most basic way to integrate React with Magento 2.

First, download the production builds for React and ReactDom and place them in THEME_NAME/web/js. Then, create requirejs-config.js:

var config = {
    map: {
        '*': {
            'react': 'js/react.production.min',
            'react-dom': 'js/react-dom.production.min'
        }
    }
};

As mentioned above, require-config.js allows us to define the libraries or frameworks and refer to them by the key specified.

Let's first create a Button component. Create the file THEME_NAME/web/js/components/Button.js with the following content:

define (['react'], function (React) {
    var e = React.createElement;

    function Button () {
        return e('button', null, 'Button');
    }

    return Button;
});

Note that as we're not using Babel or Webpack, we can't write components using JSX. So, we'll have to use the function React.createElement. For simplicity, we first store it in a new variable:

var e = React.createElement;

The function takes at least three parameters. The first is the tag name of the element to create, or if you're using a React component you pass the component. The second parameter is either an object of props to pass to the component (for example, {className: 'btn'}) or null for no props. Starting from the third parameter, you can pass children elements each as a parameter to the function.

Finally, we return the component to be used in other components:

return Button;

Now, we'll create the main component App that will render other components. Create THEME_NAME/web/js/App.js:

require(['react', 'react-dom', 'js/components/Button'], function (React, ReactDom, Button) {
    var e = React.createElement;

    function App () {
        return e('div', null, e(Button));
    }

    ReactDom.render(e(App), document.getElementById('root'))
});

Note that we assigned React.createElement to a new variable e. Then, in the App component we're rendering a div element that has Button as a child component:

return e('div', null, e(Button));

Notice that in order to use the Button component, in the first parameter of require we passed in the array js/components/Button, which is the path of the component. If you want to reference the components in an easier manner, you can add them to the map object in requirejs-config.js:

map: {
    '*': {
        //...
        'Button': 'js/components/Button'
    }
}

Then, in the require function when you want to use the Button component:

require([..., 'Button'], ...)

Let's use the components we created. Create Magento_Theme/layout/default.xml with the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/App.js" />
    </head>
    <body>
        <referenceContainer name="content">
            <block name="test-react" class="Magento\Framework\View\Element\Template" template="Magento_Theme::test-react.phtml" />
        </referenceContainer>
    </body>
</page>

We're loading js/App.js in the head of the page, and we're adding a new block in the content container. Remember, this is for testing purposes, so you don't need to add it to the default.xml. You can add it to whatever layout or page you want.

Next, create Magento_Theme/templates/test-react.phtml:

<div id="root"></div>

The integration is done. To test it out, first use setup:static-content:deploy command after clearing the var/cache, var/view_preprocessed, var/page_cache, generated, and pub/static/frontend directories:

php bin/magento setup:static-content:deploy -f

Recommended read - Learn how to compile front-end changes in Magento 2 easily: How to Make Your Front-End Development Faster in Magento 2 Using Grunt

After that's done, go to the home page and you should see a button:

Using Vue with Magento

Vue is another popular Javascript framework. Integrating it with Magento is pretty easy.

First, download the latest version of Vue, either development or production. Once it downloads, place the JS file in THEME_NAME/web/js.

Next, create requirejs-config.js with the following content:

var config = {
    map: {
        '*': {
            'vue': 'js/vue.min',
        }
    }
};

And with that, we're ready to use Vue!

Let's create a btn component. Create the file THEME_NAME/web/js/components/Btn.js:

define(['vue'], function (Vue) {
    return function () {
        Vue.component('btn', {
            props: ['text'],
            template: '<button>{{ text }}</button>'
        });
    }
});

This will create the btn component. Next, create THEME_NAME/web/js/App.js:

require(['vue', 'js/components/btn'], function (Vue, btn) {
    btn ();

    new Vue ({
        el: '#root'
    });
});

This will get the btn component we create it to register it then create our Vue app.

To use the Vue app, create THEME_NAME/Magento_Theme/layouts/default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/App.js" />
    </head>
    <body>
        <referenceContainer name="content">
            <block name="test-vue" class="Magento\Framework\View\Element\Template" template="Magento_Theme::test-vue.phtml" />
        </referenceContainer>
    </body>
</page>

This will add the App.js script we created to the head of the page, and will add a new block to the content container. Remember, this is for testing purposes, so you don't need to add it to the default.xml. You can add it to whatever layout or page you want.

Finally, create THEME_NAME/Magento_Theme/templates/test-vue.phtml:

<div id="root">
    <btn text="Button"></btn>
</div>

php bin/magento setup:static-content:deploy -f

Recommended read - Learn how to compile front-end changes in Magento 2 easily: How to Make Your Front-End Development Faster in Magento 2 Using Grunt

After that's done, go to the home page and you should see a button:

Conclusion

In this tutorial, we went over how to integrate some of the famous and widely used frameworks and libraries with Magento 2. Hopefully, this will help you expand your Magento 2 development!

How to Use Magento With Bootstrap, React, and Vue.js

Shahed Nasser

Shahed Nasser

Prerequisites: Create a Theme

Using Bootstrap with Magento

Using React with Magento

Using Vue with Magento

Conclusion

Beginner's Guide to Magento 2: Understanding the Structure

Adding an Image Uploader in an Admin Form in Magento 2

How to Easily Style Magento 2 Emails

How to Add Keyboard Shortcuts In a Chrome Extension

Useful Tailwind CSS Libraries and Plugins

Prerequisites: Create a Theme

Using Bootstrap with Magento

Using React with Magento

Using Vue with Magento

Conclusion

Subscribe to Newsletter

Thank you!