How to include & add custom js in Magento 2

Written by Mahesh Makwana

Mar 31, 2021

How to include & add custom js in Magento 2

We learn how to add custom js in Magento 2

In modules Developing, we need to add custom JS in Magento 2. There are many ways to add custom js in Magento 2. Here we show some possible way to add custom js give below:

1) Via <script type=”text/javascript></script>

This way is the most accessible way to add javascript, but this is an unreliable way. This way provides simplicity but has many significant drawbacks. When the complexity of the project increases, it becomes tough to control such a code. Another issue is that the code connected in this way is highly vulnerable to CSS attacks (Cross-site scripting). If you want this way to add javascript, you should add the following attributes when connecting: deferred=”true”async=”true”.

<script type="text/javascript">

  alert("Javascript Call");


2) Via data-mage-init attribute

Magento 2 use require-config.js to connect js scripts. This approach allows using JS modularly as well as background and asynchronous loading. This approach uses a unique data-mage-init attribute. The attribute must contain the JS module path as a value, the element to which we want to apply our JS code to and configuration parameters.

Hire our Magento 2 Development partner for custom development

Example: add your custom javascript file and add your code init.



define(["jquery", "domReady!","custom_js"], function($,dom,custom_js){

        alert("Add Custom Js");


after we connect our custom javascript to requirejs.



var config = {
    map: {
                                 deps: ['jquery']

Now we simply call our custom javascript code into phtml file using data-mage-init attribute.

<div class="example-element"  data-mage-init='{"custom_js": {}}'>A single div</div>

3) Via Adding Layout

In this Method you don’t need to define your custom javascript to requirejs-config.js file. Simply add your custom js file to layout using <script> tag.

<?xml version="1.0"?>

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    	<script src="Dolphin_RequireJsDemo::js/custom_js.js" />

And add the below code to your custom js file:


    alert("Add Custom Js");


4) Via <script type=”text/x-magento-init”>

Often we have to pass more than one argument to our module. The syntax of data-mage-init attribute can be difficult to read, so type=”text/x-magento-init” can be used as an alternative. It looks like this:

<script type="text/x-magento-init">
        "*": {
            "Dolphin_RequireJsDemo/js/custom_js": {
                "slidername": "Silder Name Here",
                "slideritems": "Silder Items Here"

And you can access this value into your custom javascript file like below:

], function ($,dom) {
    'use strict';
    return function(config) {

5) Using an imperative approach

This method is also used to add custom javascript to connecting JS modules. Magento 2 official documentation does not recommend using this method. You can add directly into your phtml file like below:

      function($) {

      	alert("Add Custom Js");


I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.

Mahesh Makwana


We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out This Form and one of Our Technical Experts will Contact you Within 12 Hours.

    Copyright © 2023 DOLPHIN WEB SOLUTION. All rights reserved.

    TO TOP