How to use JQuery in Laravel (NPM)

Question

Im new to web development and I work with the Laravel framework. I use npm for handling with packages. But now I have a problem to implement JQuery. Bootstrap is implemented to larval and it works

<link rel="stylesheet" href="/css/app.css">

In my Laravel project is in the package.json

 "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "webpack": "2.2.1"
  }

Does that mean that Jquery is already in my project? But how looks the link like above from Bootstrap for jquery. For Bootstrap I have to compile new code (npm run dev) have I to do the same for Jquery?

You have to execute command npm run dev or npm run production. Check whole this page. Running that command Laravel's mix will include jQuery into app.js. — Tpojka
– Tpojka, Commented Jul 29, 2017 at 20:20

Ikbel · Accepted Answer · 2017-07-30 04:03:25Z

11

Make sure your resources/assets/js/bootstrap.js got jQuery imported:

window.$ = window.jQuery = require('jquery')

Then you'll be able to use jQuery in your project.

answered Jul 30, 2017 at 4:03

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hmerman6006 Over a year ago

After running npm install jquery --save-dev, placing this solution in the same named file before running npm run dev worked in Laravel 8! Thanks.

prola · Accepted Answer · 2017-07-30 00:48:16Z

6

JQuery is already installed within your project. To use it place the reference within your view.

<script src="{{ mix('js/app.js') }}"></script>

and run npm run dev

answered Jul 30, 2017 at 0:48

prola

2,8231 gold badge18 silver badges17 bronze badges

Comments

Bhargav Raviya · Accepted Answer · 2024-10-30 15:03:12Z

Install JQuery in laravel 11

npm install jquery

Change/Adding file resources/js/app.js

import jQuery from 'jquery';
window.$ = jQuery;

Also change vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '$': 'jQuery'
        },
    },
});

Create Build using npm

npm run build

if using script tag then using module

<script type="module">
</script>

don’t use this

<script type="text/javascript">
</script>

Daniel Neonzz Young · Accepted Answer · 2023-08-12 14:39:09Z

0

Just had a look at this for a laravel 10 project with jetstream livewire these are the steps I took to get jQuery working: open windows terminal npm install jquery added './node_modules/jquery/**/*.js' to tailwind.config.js added 'node_modules/jquery/dist/jquery.min.js', to vite.config.js then added this to my head tag @vite('node_modules/jquery/dist/jquery.min.js?commonjs-entry') finally I added import jQuery from 'jquery'; window.$ = window.jQuery = jQuery; to bootstrap.js in resources/js this added jQuery.

answered Aug 12, 2023 at 14:39

Daniel Neonzz Young

348 bronze badges

Comments

Jayakusuma · Accepted Answer · 2018-03-10 08:22:02Z

0

all the submitted answer are correct, but i want to add that you need to put reference for your js/app.js as that is where your javascript and jquery file is and you need it to make it work. MORE importantly, you need to write it in every views that requires spesific javascript/jquery function

<script src="{{ asset('js/app.js') }}"></script>

answered Mar 10, 2018 at 8:22

Jayakusuma

394 bronze badges

Collectives™ on Stack Overflow

How to use JQuery in Laravel (NPM)

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related