CODEWITHSUNDEEP
jquerylaravelnpm
HansMuff
HansMuff

Reputation: 301

How to use JQuery in Laravel (NPM)

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?

Upvotes: 3

Views: 22867

Answers (5)

Bhargav Raviya
Bhargav Raviya

Reputation: 399

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>

Upvotes: 1

Daniel Neonzz Young
Daniel Neonzz Young

Reputation: 34

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.

Upvotes: 0

Jayakusuma
Jayakusuma

Reputation: 39

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>

Upvotes: 0

Ikbel
Ikbel

Reputation: 7851

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.

Upvotes: 11

prola
prola

Reputation: 2823

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

Upvotes: 6

Related Questions