How to add jQuery to Bootstrap using Vite JS?

edit

To add jQuery to Bootstrap using Vite JS, follow these steps:

1. Install both Bootstrap and jQuery using the npm command in your terminal:

npm install bootstrap jquery

1. In your main index.js file, import both Bootstrap and jQuery:

import 'bootstrap';
import $ from 'jquery';

1. Create a new file called vite.config.js in your project root directory and add the following code:

export default {
    optimizeDeps: {
        include: ['jquery'],
    },
}

1. Restart your development server and you should now be able to use both Bootstrap and jQuery in your application.

Note: If you are using the Bootstrap JavaScript plugins that rely on jQuery (such as dropdown menus or modals), be sure to include the following JavaScript code at the bottom of your index.html file:

<script>
   $(document).ready(function() {
      // Your Bootstrap JavaScript code here
   });
</script>