this is my webpack.mix.js const mix = require(‘laravel-mix’); /* |————————————————————————– | Mix Asset Management |————————————————————————– | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. ..
i got the problem in making program for my company, the concept is you can input mark(nilai) for every sector based on kriteria of the mark you had to fill and it has 5 kriteria. the problem is i have to separate the kriteria based on the kriteria name and when i try the array ..
It’s a Laravel Breeze project with InertiaJs & VueJs. In my show.vue page (of a franchise) I can create a collection and in there I can create books for that collection. Anyway, when I create a collection everything is fine, but when I want to create a book, I have this typeError.. And I don’t ..
First of all, this is the start of where I am at as a similar post Store blob as a file in S3 with Laravel I am sending a photo from VueJS to Laravel. It is coming as multipart/form-data. Vue Code: export default { emits: [‘onClose’], props: [‘isOpen’], data: function() { return { serverOptions: { ..
The following code of inertiajs with vue only works this way computed: { flash: function () { if (this.$page.props.flash.message) { this.$toast.open({ type: this.$page.props.flash.type, message: this.$page.props.flash.message.message, }) } return this.$page.props.flash.message } }, watch: { flash: function (newVal, oldVal) { } }, but if i remove the watch part, it doesn’t work. Also if i put the ..
I am working on Laravel Inertia project. app.js on local is 4MB When I load the same file on live server then it becomes 13-15MB. due to which page load time increases to 10-15 seconds. I push file after compressing it by npm run prod Local Response time Live Response time Everything is working great ..
Problem – when I manually change the URL to not existing route my error page shows correctly. but when I try to navigate back to the previous page using browsers back button Inertia renders multiple modal. Steps to reproduce the error Visit a non-existing route by manually editing the address. Visit the previous page using ..
Because I need to store translation text in the database so that users can update it, I’m using the spatie/laravel-translation-loader package. In my application, I’m combining Inertia JS and Vue 2. I’m looking for advice on how to effectively pass translation data to the Vue component. Thanks. Sourc..
I have a Laravel website that should be in charge of authentication for my different projects. It is using Jetstream, Inertia.js and Vue and I want it to work as a SSO. It is only responsible for authentication and user management, nothing else. Let’s imagine a website called TheFirst that should use this authentication website ..
I know how to use VUE3 and Laravel and implement permissions in it but unable to implement with inertia JS. Please help me out to implement it or share a tutorial to follow. I had already followed the below links, but not getting any output. Sharing user permissions with Vue components using inertia How to ..
In a Laravel Jetstream app (using VueJS and Laravel), I have a simple month calendar page (using this example from CSS Tricks) that works great. I have it working great, and it switches months just fine. It’s wired to a Laravel controller that does what it should; public function calendar() { $now = Carbon::now(); $currYear ..
hi im using InertiaJs and laravel 8 and i make a flash message component , using inertia shared data after a function i call the flash message using with-> on controllers public function test(Request $request) { Test::create([ ‘comment’ => $request[‘comment’], ]); return Redirect::back()->with(‘success’,’Test.’); } but Then i make shopping cart using vuex and i dont ..
I’ve this route code: // route.php Route::post( ‘/page’, [AppHttpControllersPageController::class, ‘index’] )->name(‘page.details’); My controller: // PageController.php public function index(Request $request) { return Inertia::render(‘Page/PageDetails’, [ "name" => $request->name, "overview" => $request->overview, "url" => $request->url ]); } It’s working, fine, but If I try to reload ( F5 ) it’s return an error 500. Have some way to ..
Im trying to build single page app using Vue + inertia + laravel. I have an html template that include external js file. When integrating the template with vue, i notice that, the js only run only once after the page is refresh and not applied to the other page (when navigate using router-link) i ..
So the concept is simple but I cannot for the life of me wrap my head around it. I have 2 files. The first one is RoomsModal.vue – This holds a modal popup that has "rooms" with an enter button. When someone clicks to enter a room, it opens up a tab from RoomTabs.vue. However ..
I want to send data from page A to page B without use controllers, just in laravel routes. ( Laravel / VueJS3 / InertiaJS ) In my first page, I have this method: // first.vue tappedCourse(course: Course): void { const data: secondParams = { courseName: course.name, }; Inertia.get("/second", data as any); }, And in my ..
public function share(Request $request) { return array_merge(parent::share($request), [ ‘darkMode’ => !!$request->user()->dark_mode, ]); } So the code above is saying "use darkMode" once a user is logged in. The issue is, if a user is NOT logged in it comes back as NULL. How do I set a default value if it comes back as null ..
I know I am blind because I’ve been looking at this for 2 days off and on and I think I am just eye stuck on what is really going on. Below is the code. What SHOULD happen is an array of data should be shown into a modal. I can see the data as ..
I am working on a Laravel 8 app with Jetstream and Inertia and I created a form that has two text fields and one image upload field. The problem is when I edit the resource and upload a new image everything works but when I try to save the resource again immediately after the first ..
I am sure it is because Ive been staring at this for hours off and on that I am missing something silly. I am trying to pull the avatar of the username in question. The :alt="user.name" is working just fine but the avatar isn’t. I am using Laravel with Jetstream to make this work. I ..
the generated page source code stays like this after setting up Ziggy and running npm run watch. <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link href="/css/app.css" rel="stylesheet" /> @routes <script src="/js/app.js" defer></script> </head> Supposedly, @routes should be converted into something like this: <?php echo app(‘TightencoZiggyBladeRouteGenerator’)->generate(); ?> Here are my codes: webpack.mix.js ..
in vuejs2 applications I created common mixin and referenced it in resources/js/app.js like : require(‘./bootstrap’); import Vue from ‘vue’; import common from "./common"; Vue.mixin(common); But I failed to make similar in Laravel 8/Inertia.js 0.4/vuejs3 application : import Vue from ‘vue’ // i got compile error : export ‘default’ (imported as ‘Vue’) was not found in ..
I am working on a project in which I pass a list of concerns and a list of client concerns. I am trying to check all concerns that have matching client concerns in the edit view. The idea here is that I can have a list of all possible concerns and have the client’s concerns ..
I have a short question. Does inertia render asynch? I realized, as soon I delete a DB – Entry, while I connect to new Nav-Link direct afterwards (onStart), the changes (onSuccess) wont be showed up. Inertia.post(‘data-delete’, { id: this.meeeh.data[index].id, }, { preserveScroll: true, onBefore: () => { window.Toast.confirm(‘Delete?’); }, onStart: (visit) => { window.Toast.load(‘Delete…’); }, ..
I keep receiving this error. My app has vue component for searching product: <template> <form @submit.prevent="searchProduct"> <input placeholder="Search" v-model="form.q" type="search"/> </form> </template> <script> export default { data() { return { form: this.$inertia.form({ _method: "get", q: ”, }), }; }, methods: { searchProduct() { this.form.get(route(‘search.product’, {q : this.q}), { errorBag: "validate_q", preserveScroll: true, }); }, }, ..
