Level 73
Why are you wanting to use jQuery when you are using vue?
Dec 10, 2023
10
Level 7
using external javascript library with vite in laravel
I have a Laravel project and I am using vue3 with vite now I am facing a problem whenever I try to add any other javascript source it will not work and I don't see any error or warnings in the console, I also tried rearranging the script tags and it's still not working, I even tried to add the script in the input array in vite and it's still not working
here is my vite.config.js
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import inject from '@rollup/plugin-inject';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
inject({
$: 'jquery',
jQuery: 'jquery'
})
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
'@': '/resources/js',
},
},
});
here is the blade file where I load the app
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
{{--Meta--}}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Welcome to little more shops">
<meta name="keywords" content="little more Shops">
<meta name="author" content="Little More">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
{{--Links--}}
<link rel="stylesheet" href="{{ asset('assets/css/core.min.css')}}">
<link rel="stylesheet" href="{{ asset('assets/css/vendor_bundle.min.css')}}">
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="http://127.0.0.1:8000/icon.png">
<link rel="apple-touch-icon" href="{{ asset('demo.files/logo/icon_512x512.png') }}">
<link rel="manifest" href="{{ asset('assets/images/manifest/manifest.json')}}">
{{-- Title --}}
<title>Welcome to Little More Shops</title>
<style>
.loading{
width: 50px;
height: 50px;
}
.no-js #loader { display: none; }
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(http://127.0.0.1:8000/icon.png) center no-repeat #fff;
}
</style>
@vite(['resources/js/app.js'])
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
</head>
<body>
{{-- <div class="se-pre-con"></div> --}}
<div id="wrapper">
<div id="app">
</div>
</div>
<script src="{{ asset('assets/js/core.min.js') }}"></script>
</body>
</html>
now I am trying to load the core.min.js script but it's not working also core.min.js is dependent on another script in the folder but it's not required for me to include all the scripts in the blade file
Level 7
@Tray2 its only for the core.min.js script as its requires jquery
Level 73
@abdallahsawaqi Then rewrite the core so you don't need jQuery, mixing like that usually leads to headaches.
Level 7
@Tray2 The problem is that the core.min.js is an external script which is used in the template for sliders and so on and the file is too long I want to know if there is any possibility of using the core.min.js with the app.js created by vite because I tried bundling the script and its not working
Level 73
@abdallahsawaqi If it's just a slider you want, you really should check out autoanimate
Level 7
@Tray2, not just slider various animations and even DOM integration it's like you cant use the template without using the core. min.js script
Level 73
@abdallahsawaqi Sound to me that you need to make a choice, either rewrite everything to use vue, or rewrite everything to use jQuery.
Level 7
@Tray2 so there is no way of using external scripts if you are using vue js?
Level 73
@abdallahsawaqi Sure there is, you should be able to add jQuery like a normal, but I'm not sure how to make the components aware of jQuery.
Level 7
@Tray2 thank you for pointing that out as I didn't realize about the components, so what I did is i just create a global function in the core.min.js like this
window.myFunction = function() {
//core.min.js code
};
then in the vue component, I just called the global function like this
onMounted(() => {
if (typeof window.myFunction === 'function') {
window.myFunction();
}
});
Please or to participate in this conversation.