How to include the third-party javascript library in Magento 2

It happens sometimes, you need to include any third-party javascript library into your Magento 2 project. Recently in my project, I needed to include the angular js library in my project. So I thought it would be great if I share this information with everyone.

To include a third-party js you need to follow the below instructions, first, you need to create a layout file of the location where you want to use the third-party library, Location of the layout file would be

app/code/Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/styles.css" />
        <link src="Vendor_Module::js/angular.min.js" />
    </head>
    <body>
        <referenceContainer name="content">
            <block class=“Vendor\Module\Block\Your_Block” name=“unique_handle_name” template="Vendor_Module::view.phtml" />
        </referenceContainer>
    </body>
</page>

Then you need to keep your JS and CSS files at

app/code/Vendor/Module/view/frontend/view/web/css/styles.css

app/code/Vendor/Module/view/frontend/js/angular.min.js

And that is it

Happy Coding 🫶

How to include the third-party javascript library in Magento 2

Leave a Reply Cancel reply