When I importing assets through vite I have some issues... some events is not working and there some errors in the console.. but if I import the assets like the way in the in the theme then it's working?
If I do like this, then its working
<!-- Main JS -->
<script src="{{ asset('assets/js/main.js') }}"></script>
<!-- Style Css -->
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
<!-- Simplebar Css -->
<link rel="stylesheet" href="{{ asset('assets/libs/simplebar/simplebar.min.css') }}">
<!-- Color Picker Css -->
<link rel="stylesheet" href="{{ asset('assets/libs/@simonwep/pickr/themes/nano.min.css') }}">
<!-- Vector Map Css-->
<link rel="stylesheet" href="{{ asset('assets/libs/jsvectormap/css/jsvectormap.min.css') }}">
but if I put the assets here it's not working
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
If the theme assets are built already, you don't need to use Vite. You should use do what you did using asset helper and put them inside public directory.
If they aren't built, you should add them inside resources/**/* and then add them into Vite to be built.
@MohamedTammam Ok sir, I'm using livewire on this, When I'm on the dashboard component there is no errors in console but when I access another component/url I have this errors
index.js:196 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
at index.js:196:32
(anonymous) @ index.js:196
apexcharts.min.js:14 Uncaught (in promise) Error: Element not found
at apexcharts.min.js:14:37375
at new Promise (<anonymous>)
at t.value (apexcharts.min.js:14:21643)
at index.js:111:7
(anonymous) @ apexcharts.min.js:14
value @ apexcharts.min.js:14
(anonymous) @ index.js:111
apexcharts.min.js:14 Uncaught (in promise) Error: Element not found
at apexcharts.min.js:14:37375
at new Promise (<anonymous>)
at t.value (apexcharts.min.js:14:21643)
at index.js:192:8
app.blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="ltr" data-nav-layout="vertical" class="light" data-header-styles="light" data-menu-styles="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="shortcut icon" href="../assets/img/brand-logos/favicon.ico">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite([
'resources/css/app.css',
'resources/js/app.js',
])
<!-- Main JS -->
<script src="{{ asset('assets/js/main.js') }}"></script>
<!-- Style Css -->
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
<!-- Simplebar Css -->
<link rel="stylesheet" href="{{ asset('assets/libs/simplebar/simplebar.min.css') }}">
<!-- Color Picker Css -->
<link rel="stylesheet" href="{{ asset('assets/libs/@simonwep/pickr/themes/nano.min.css') }}">
<!-- Vector Map Css-->
<link rel="stylesheet" href="{{ asset('assets/libs/jsvectormap/css/jsvectormap.min.css') }}">
<!-- Styles -->
@livewireStyles
</head>
<body class="">
<div class="page">
@include('components.layouts.shared.sidebar')
@include('components.layouts.shared.header')
<div class="content">
<div class="main-content">
<main>
{{ $slot }}
</main>
</div>
</div>
@include('components.layouts.shared.search-modal')
@include('components.layouts.shared.footer')
</div>
<!-- Apex Charts JS -->
<script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>
<!-- Chartjs Chart JS -->
<script src="{{ asset('assets/libs/chart.js/chart.min.js') }}"></script>
<!-- Index JS -->
<script src="{{ asset('assets/js/index.js') }}"></script>
<!-- Back To Top -->
<div class="scrollToTop">
<span class="arrow"><i class="ri-arrow-up-s-fill text-xl"></i></span>
</div>
<div id="responsive-overlay"></div>
<!-- popperjs -->
<script src="{{ asset('assets/libs/@popperjs/core/umd/popper.min.js') }}"></script>
<!-- Color Picker JS -->
<script src="{{ asset('assets/libs/@simonwep/pickr/pickr.es5.min.js') }}"></script>
<!-- sidebar JS -->
<script src="{{ asset('assets/js/defaultmenu.js') }}"></script>
<!-- sticky JS -->
<script src="{{ asset('assets/js/sticky.js') }}"></script>
<!-- Switch JS -->
<script src="{{ asset('assets/js/switch.js') }}"></script>
<!-- Preline JS -->
<script src="{{ asset('assets/libs/preline/preline.js') }}"></script>
<!-- Simplebar JS -->
<script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
<!-- Custom JS -->
<script src="{{ asset('assets/js/custom.js') }}"></script>
<!-- Custom-Switcher JS -->
<script src="{{ asset('assets/js/custom-switcher.js') }}"></script>
@stack('modals')
@livewireScripts
</body>
</html>
@anonymouse703 I think there might be one of two reasons.
The order of your JavaScript files is wrong. Or there's a missing element in your HTML that being called in JavaScript file.
Please or to participate in this conversation.