If you use NPM to install vendor modules, heres an easy way to include them in your bundled app.js file so you can use them in your Laravel app, this is assuming you’ve gone through the process of setting up the ideal frontend workflow using Laravel Mix already. If you haven’t setup Laravel Mix, you can find the docs for it here: https://laravel.com/docs/5.5/mix
Inside your resources/assets/js/app.js file, you can simply add require('MODULE_PATH_RELATIVE_TO_NODE_MODULES') . So for example, if you wanted to add Typeahead.js that is installed via NPM, you’d add the following:
require('typeahead.js');
Or for fine-grained control on what file you want to use, you can be more specific
require('typeahead.js/dist/typeahead.jquery.min.js');
If you wanted to have even more control on how you call and import your package, you can use the following format;
window.Typeahead = require('typeahead.js/dist/typeahead.jquery.min.js');
You can even include a file from a path relative to the app.js if required. However majority of our frontend vendor files are installed via NPM.
We use NPM (a dependency management tool) as this makes the job of updating/maintaining our frontend dependencies a much easier process, most mainstream packages can be found on NPM.
Want to learn more about Laravel?
Mike Sheward
Technical Director
Mike is our Technical Director who has worked on eCommerce projects since 2014 and has been with Develo since 2015. He became certified in Adobe Commerce in 2023. Mike’s favourite aspect of web development is tackling intricate eCommerce challenges with the bespoke platform Magento/Hyvä, and he tells us his best achievement from working at Develo is fostering a culture of growth and innovation within our team. Outside of work, he can be found spending time with his family, baking and walking his dogs.
Develo is a leading Magento agency and eCommerce web development company based in Birmingham, in the UK, serving clients globally since 2010. We provide our Learn articles to share knowledge of magento web development, web app development and more to the wider web developer community. To extend your team with our white label web developers, collaborate or consult with us on your project contact us here.