laravel inertia.js with vue.js3 templet js file not working - javascript

HELP ME PLEASE 🙏🙏🙏🙏🙏
im new into inertia.js
CSS FILE WORKING BUT JS FILE NOT WORKING
iam using inertia.js with laravel 9 with vue.js-3
using admin html template im bulting admin dashboard but im facing problem with js file it was not working but when i used normal laravel 9 with blade.php concept it work perfectly.
so i tryied from 2 days with different paid admin templets but it was not working
help me to fix it
i tried below methods but not working
MY
my code
APP.BLADE.PHP FILE
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- //css -->
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<!-- //js -->
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
<!-- Scripts -->
#routes
#vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
#inertiaHead
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
I TRYID THIS METHOD ALSO
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="assets/libs/jsvectormap/maps/us-merc-en.js"></script>
METHOD 2
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>

I have solution to this, so rather than adding the js and css in the app.blade.php file, move asset folder resources folder.
Import the all css file in app.css like as
//resources/css/app.css
#import '../assets/css/dashlite.css?ver=3.1.1';
#import '../assets/css/theme.css?ver=3.1.1';
same import the all js file in app.js like as
//resources/js/app.js
import("../assets/libs/jsvectormap/js/jsvectormap.min.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
Now in app.blade.php add css and js inside the vite directive
#vite(['resources/js/app.js', 'resources/css/app.css',
"resources/js/Pages/{$page['component']}.vue"])
May this will help you. Happy coding

Related

css file empty, how the styling works here in this project?

I am a first grade CS student in university.After learning some of the basics of React.js. I am trying to understand a resume project. Can anyone tell me why the app.js and index.js are empty here. I wonder how the styling is accomplished...I spotted classname attributs inside jsx elements of the components but i can't find related css file in the src folder, could it be inside public folder then? Besides answering me questions, feel free to point out what kind of React topics/techniques I need to learn about in order to understand better how the styling works here.
The project repository by nordicgiant2: https://github.com/nordicgiant2/react-nice-resume
I have checked topic like how the styling working for component in React.js and the direct anwser haven't been found.
The styling turns to be inside the public folder, and when check the index.html file inside the public folder I realize the link tag points toward to the css file inside the public folder. My original assumption was that, the styling sheet should be place inside the src folder as the TUTORIAL said.
Below is a snippet of the inde.html of this project which reveal the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<title>Nordic Giant Development</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>

Adding JS from HTML Template in Sveltekit project

I have an HTML Template with CSS and JS. I wanted to import it in SvelteKit.
Adding HTML and CSS is pretty straightforward. When it comes to JS, there are problems.
As far as I have tested with the browser, The imported JS code works, but it fails to affect the DOM.
Ex. console.log works, but adding bootstrap.js or slick.js do not work. Also, custom JS written is not loading. This means there is no issue with the directory.
This is how I have imported CSS and JS in Svelte.
<svelte:head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/responsive.css" />
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/isotope.pkgd.min.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/script.js"></script>
</svelte:head>
Is there another way to import external JS to Svelte files, a way where the JS will affect the DOM?
For global scripts, you can add them to your app.html or index.html in your SvelteKit project, just like how you would with a normal HTML webpage:
src/app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Metadata such as title or description -->
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<!-- Your CSS / JS globally -->
<link rel="stylesheet" href="https://some-cdn.com/css/bootstrap.min.css" />
<script src="https://some-cdn.com/js/script.js"></script>
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>
HOWEVER, it seems you're importing them from an absolute URL. If this is located inside the /lib folder, you can import them using a tag in your +layout.svelte:
<script>
import "$lib/css/bootstrap.min.css"
// you can do the same with JavaScript
</script>
A very common scenario, however, is that they are in node_modules. To import these, you can import them from the module:
<script>
import "module/style.css"
</script>
If they are in your static folder, you can use app.html to import them as shown in the first example.
Since you're using bootstrap, I would recommend to use svelte-add/bootstrap and import any necessary JS in app.html using a CDN

where to put javascript from website template in blazor project?

I created a new Blazor WebAssebly project in VS19 and wanted to add a website template to my project, I downloaded it but was wondering where I should put the JavaScript files it came with.
I currently have them here in my index.html file in wwwroot folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ImmoPlatform.SPA</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<!-- jQuery library -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="js/slick.js"></script>
<!-- Price picker slider -->
<script type="text/javascript" src="js/nouislider.js"></script>
<!-- mixit slider -->
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
but when I start my blazor project the javascript doesent seem to load. the CSS I put in the mainlayout.razor file in the Shared folder works file and that CSS came with the template.
Is this the correct place to put them? or should I put them somewhere else?
I ran into the same problem as you. The J/S files must point to the index.html; however, Blazor does not load them automatically – it must use the J/S interoperability, which is complex, and much more so if you do not know the functions that the template has.
At home, I wanted to use Admin LTE, luckily I found a project on GitHub, where they are making a version of this template for Blazor.
https://github.com/sjefvanleeuwen/blazor-adminlte
Hopefully the Blazor team will change this type of operation, since, in my view, it is a setback in the way of doing frontEnd.

external js from keenthemes metronic theme not working in angular

hey guys so I am using metronic theme and I made an angular version of demo3 HTML version
and everything looks fine except
if I import external js like this
<!doctype html>
<html lang="fa" direction="rtl" dir="rtl" style="direction: rtl">
<head>
<meta charset="utf-8" />
<base href="/">
<script src="assets/plugins/global/plugins.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js" type="application/javascript"></script>
<script src="assets/js/scripts.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js" type="application/javascript"></script>
<script src="assets/js/pages/widgets.js" type="application/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body kt-root id="kt_body" class="header-mobile-fixed subheader-enabled aside-enabled aside-fixed aside-secondary-enabled page-loading">
</body>
</html>
I don't have any error but toggle buttons not working
and if I added like this to angualr.json file
"scripts": [
"src/assets/plugins/global/plugins.bundle.js",
"src/assets/plugins/custom/prismjs/prismjs.bundle.js",
"src/assets/js/scripts.bundle.js",
"src/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
"src/assets/js/pages/widgets.js"
]
when I serve the project I get this error
add
import 'core-js';
in the polyfills.ts file before the zone
and if you have or imported es6-shim just remove that
and I don't know why your external js not working that's the other problem

How to include jquery plugin in ionic 3

I'm trying to implement jQuery FloatLabel in my ionic app -> https://github.com/m10l/FloatLabel.js/tree/master
I used that plugin because that plugin also was implemented in a web version, so to be uniform in design.
I included that inside src/index.html with jquery
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
I want to execute this script on page load
$( '.js-float-label-wrapper' ).FloatLabel();
Here's my src/index.html code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
It works on web version but not in ionic. How do I implement that on ionic?
I want it like this fiddle -> https://jsfiddle.net/acrmktq3/
link jquery.js in your index.html:
<script src="assets/js/jquery-3.2.1.min.js"></script>
run in node:
npm install jquery
and import it in your page like:
import * as $ from "jquery";
Try adding your JavaScript code in the bottom of your body like this:
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</body>
You're addng it before your app initialization, the main.js wasn't even loaded and you've already executed your code, so using it on the bottom of your code should do the trick.
Also, have you ever tried using this FloatLabel in a Ionic application? Since the page may not be loaded and the code already had been executed you need it to be more "Angular way". You can use it inside the component that's having the floating label, just use this to be able to use JQuery inside your component:
declare var $: any; // declare this bellow your page imports to be able to use jQuery
Or you can try Ionic floating Label, so there's no need to have JQuery and other library inside your project, even if it's not "uniform" design
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<!-- Use the floating attribute to have your label to float when you focus on the input -->
<ion-input></ion-input>
</ion-item>
Hope this helps.

Categories