Setting up Laravel 5.7 with npm packages installation

I've been trying to add npm packages to my Laravel project by using the commands npm install and npm install masonry-layout. After running npm run watch, I can see the package in my node_modules folder.

In an attempt to integrate the package into my project, I added require('masonry-layout'); to my app.js file. Additionally, I tried adding 

window.anything = require('masonry-layout');
or 
window._ = require('masonry-layout');
to my bootstrap.js file. In my view, I called the function as follows:

var $grid = $('.grid').imagesLoaded( function() {
    $grid.masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true,
        isResizable: true,
        transitionDuration: '0.8s',
        isAnimated: true
    });
});

This is what my app.js looks like:

require('./bootstrap');
require('masonry-layout');
require('imagesloaded');

And here is the content of my bootstrap.js file:


window._ = require('lodash');
window.anything = require('masonry-layout');
window.anything = require('imagesloaded');

// Remaining code omitted for brevity

Despite also installing imagesLoaded, it doesn't seem to be working. Only when I include the cdn link directly in my view does it work properly. Can someone help me identify what I am doing wrong?

javascriptlaravelnpm

Answer №1

Ensure that you are loading masonry-layout and imagesLoaded after loading your jQuery. It should be loaded in the following order:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    window.Masonry = require('masonry-layout');
    window.ImagesLoaded = require('imagesloaded');

    require('bootstrap');
} catch (e) {}

Once done, implement it with the code below:

new Masonry('.grid', {
    // options
});

You can also remove them from your app.js.

Note

If you wish to use it as $('.grid').masonry(...), you will need to install jquery-bridget:

npm install jquery-bridget

Then update your bootstrap file as follows:

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Masonry = require('masonry-layout');

// make Masonry a jQuery plugin
jQueryBridget( 'masonry', Masonry, $ );

// now you can use $().masonry()
$('.grid').masonry({
  columnWidth: 80
});

For additional details, refer to:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a JavaScript timer on a PHP file that sets the input and textarea styles back to their default

When I use a timer in a JavaScript file after submitting a form to insert data into a MySQL database via PHP, the style of the textarea and input elements changes back to default. This issue only occurs when the timer is active. I tested submitting the fo ...

javascriptphphtmlcssmysql

Safari is experiencing a unique DOM Exception 11 error when making XHR requests

In my code, I have a function that is responsible for downloading chunks of a file using an xhr request. The function is structured like this: var blobXHR = new XMLHttpRequest(); //api.media.chunkURL() returns the correct URL for each chunk blobXHR.open( ...

javascriptiossafarixmlhttprequest

Is there a built-in function in Firefox that can retrieve a list of all indexedDB names stored in the

When working in chrome, I utilized the window.indexedDB.databases() method to retrieve all indexedDb names. However, this same method does not seem to be functioning in firefox. In an attempt to resolve this issue, I will explore alternative methods such ...

javascriptfirefoxindexeddbpouchdbfirefox-developer-tools

Implementing Google Places reviews on a website with the help of JavaScript

Struggling to display the Google reviews for my company on our website, I can't seem to make it work. I've attempted to use this code: <script> $(function() { var people = []; $.getJSON('https://maps.googleapis.com ...

javascriptjsongoogle-places-api

The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. Accordi ...

javascriptformsvue.jsbootstrap-4form-submit

Creating an array upon clicking and dynamically changing its class using AngularJS

Currently, I am developing a scheduling application where there are 2 individuals enrolled for 11 different dates. The functionality I am working on involves allowing the user to click on a month, which will then be added to an array and highlighted. If t ...

javascriptangularjs

Tips for eliminating a port from an Angular 2 URL

Whenever I launch an angular2 project, it automatically includes localhost:4200 in the URL, even after deploying it on a server. Is there a way to remove the port number from the URL without making changes to the core files? I attempted to modify the pac ...

angularnpmangular2-routingangular-cli

JavaScript attaching a function to an element within an array

Can anyone explain why I am unable to assign the toUpperCase method to a specific value in an array like shown below? I'm a bit confused because I thought objects were mutable and manipulated by reference. Maybe my understanding is incorrect? var ary ...

javascriptarraysmethods

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

javascripthtmlcss

Dynamically determining the direction of a page with Vue Js

Is it possible to dynamically set the page direction (RTL or LTR) in a Vue js project? I have tried setting it dynamically using a variable called direction but it doesn't seem to work (it continues to use the standard LTR value): <html lang="e ...

javascripthtmlvue.jsvue-router

Passing Data from Child to Parent Components in ReactJS

I'm new to React and JavaScript, currently working on a website. I've encountered an issue with passing data between components from child to parent. Here's the scenario: In my App.js script, I'm using react-router-dom for routing. I ...

javascriptreactjs

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js

The ios browser environment is unable to retrieve the value during vuejs development

When using vuejs components to create a countdown component, everything seems normal in the pc and Android environments. However, in the iOS environment, there seems to be an issue with obtaining the real count calculation as it returns NaN. <templ ...

javascriptwebpackvue.jsvuejs2

The input field in Angular dynamically populates values into multiple instances of the same text

I am facing an issue with my comment inputs where whatever I type in one input is automatically populated in all other inputs. How can I ensure that the text input value only appears in the input box that I am typing into? Below is a snippet of the templa ...

javascriptjqueryangularjsangularjs-ng-repeatangular-ngmodel

Stable header that jumps to the top when scrolled

I have implemented the JavaScript code below to set the header to a fixed position when it reaches the top of the page so that it remains visible while the user scrolls. Everything appears to be functional, but the header movement is abrupt and not smooth. ...

javascriptjqueryhtmlcss

Using forRoot does not trigger Angular lazy loading functionality

I have implemented a lazy load module that needs to expose providers by utilizing the forRoot convention and returning the following code: @NgModule({ imports: [RouterModule.forChild([ {path: "", component: LazyComponent}, ])], declarations: [La ...

javascriptangular

unleash the power of JavaScript to initiate a div opening

I would like to display a div when the mouse cursor hovers over a specific link, and then hide that div when the mouse cursor moves away from the link. ...

javascript

Mastering the correct way to handle the "window" object within the Node.js testing environment using JSDom

Testing my React app using Tape and JSDom involves importing a specific module at the beginning of each test JS file: import jsdom from 'jsdom' function setupDom() { if (typeof document === 'undefined') { global.document = jsdom ...

javascriptnode.jstestingreactjsjsdom

Creating components in reactjs using the render function

Just a quick query – I've been diving into react js recently. Typically, when we create a component in React, we include the HTML template within the render function. I've noticed that most examples consist of small components with minimal HTM ...

javascriptreactjs

TypeScript is failing to resolve multiple entrypoints within external modules

Currently, I am in the process of developing an external module called @example/lib for TypeScript that has multiple entry points. My goal is to be able to use it in the following way: import * as lib from '@example/lib'; import * as foobar from ...

typescriptnpm