Category : inertiajs

I’m implementing on Vue JS with Inertia a list where you can filter by name data() { return { selectedUser: this.value, selected: null, search: ”, } }, computed: { userlist: function(){ return this.users.filter(function(user){ return user.name.toLowerCase().match(this.search.toLowerCase()) }); } }, and the component <input class="form-input" placeholder="Search.." v-model="search"> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:text-gray-900 hover:bg-gray-100 ..

Read more

I have a route defined as follows Route::post(‘s3/create/directory/{path?}’, [S3Controller::class, ‘createDirectory’]) ->name(‘s3.create.directory’) ->where(‘path’, ‘.*’); It works fine when posting to it, except when the path value is an empty string, then I get a blocked:mixed-content from Chrome. I have triple checked, and there are no HTTP requests on the page and because I am using InertiaJS, ..

Read more

I have this route in web.php Route::get(‘crm/projects/add’, [CRMController::class, ‘addProject’])->name(‘crm.addProject’)->middleware(‘auth’); this is in the CRMController class public function addProject(){ return Inertia::render(‘CRM/Projects/AddProjectPage’); } Regardless of the resource I tell the function to render it returns a 404 I am positive that the resource exists at CRM/Projects/AddProjectPage and I have tried with other resources which also have working ..

Read more

I use MUI datatable to display data from users, I want to use server-side pagination in my data but I don’t know how, I have searched in various references but it’s too confusing for me, I’m new to React import React from “react”; import MUIDataTable from “mui-datatables”; import Button from “@material-ui/core/Button”; import { InertiaLink } ..

Read more

I want to pass the ‘CourseId’ variable from a page view to a controller in order to delete it, but not sure why I can’t access the variable: view: this.$inertia.get(this.route(‘applications.courseDelete’, CourseId )) route: Route::get(‘applications/courseDelete’, [ApplicationsController::class, ‘courseDelete’])->name(‘applications.courseDelete’)->middleware(‘auth’); controller: public function courseDelete($courseId) { dd($courseId); } this returns the error, ‘too few arguments…’. ive tried adding the model ..

Read more

I need to populate parent layout from child layout or page component For example in blade I done it so. Layout <body class="has-sidebar-left @yield(‘sidebar_class’)"> Page @section(‘sidebar_class’, ‘hide-sidebar-left’) But.. how to do it in Inertia? Layout <div :class="[‘has-sidebar-left’, sidebar_class]"> <slot/> </div> Page ??? How to fill sidebar_class variable? I believe there should a simple solution, but ..

Read more

I would like to know how can I use tinymce-vue (@tinymce/tinymce-vue) with laravel-filemanager Currently I have this in my component : import Editor from ‘@tinymce/tinymce-vue’; … components: { Editor }, And in my template : <editor name="content" class="form-control my-editor" api-key="api-key" v-model="eventForm.body" :init="{ path_absolute : ‘/’, selector: ‘textarea.my-editor’, relative_urls: false, plugins: [ ‘advlist autolink lists link ..

Read more

I’m developing a personal project using Laravel with Inertia.js. I tried retrieving data from back-end to front-end through HandleInertiaRequests Middleware. I was wondering how will malicious people could get advantage of the data I show up in front-end. Inertia.js webpage discourages retrieving sensible data in this way, but I can’t figure out how that will ..

Read more

I am trying to use ziggy by importing in laravel inertiajs app (VUE3) without using @routes but i not able to use eg. route(‘home’).getting ctx.route is not a function error.. Please tell me how this is to be rightly put… app.js require(‘./bootstrap’); // Import modules… import { createApp, h } from ‘vue’; import { App ..

Read more

Hi have a form where i want to bring in fields from different components such as personal details, programme details etc. However, when I click update, it doesnt update the child form fields. What am i missing? simplified parent form (main.vue): <form @submit.prevent="update"> <PersonalDetails :personalData="application" /> <button type="submit">Update</button> </form> export default { components: { PersonalDetails, ..

Read more

I have the following inertia link component <inertia-link v-for="project in $page.props.user.favorite_projects" :key="project.id" class="flex items-center px-6 py-2 mb-1 text-sm leading-6 text-gray-300 transition duration-150 ease-in-out group focus:outline-none focus:bg-gray-700 hover:text-white hover:bg-gray-700" :href="route(‘projects.show’,project.slug)"> <div class="w-3 h-3 mr-3 overflow-hidden rounded-full"> <div class="w-full h-full" style="background-color = {{ project.color }};"> </div> </div> {{ project.project_name }} </inertia-link> Where project.color contains a hex color ..

Read more

So I have the following method: methods: { submit() { this.$inertia.post(‘/projects’, this.form); this.openModal = false; }, }, But it closes my modal even if there are validation errors. I’ve also tried with this.$inertia.post(‘/projects’, this.form); if(!this.$page.props.errors) { this.openModal = false; } Which doesn’t close the modal if there are validation errors, but it doesn’t close it ..

Read more

I’m creating a search bar for a project model with Laravel, Inertia.js and Vue. Controller: public function index(Request $request) { return Inertia::render(‘Projects/Index’,[ ‘projects’ => Project::where(‘project_name’,’LIKE’,’%’.$request->search.’%’)->paginate(7) ]); } Index.vue Template <input id="search" type="text" class="form-input" placeholder="Search…" v-model="search" @keyup="searchProject"> Script data(){ return { search: ” } }, methods: { searchProject: _.throttle(function(){ this.$inertia.get("/projects", { search: this.search }, { preserveState: ..

Read more

I am using vuejs-datepicker and inertiajs, but when I try to update the database I am getting the error: Invalid datetime format: 1292 Incorrect date value: ‘2021-07-09T12:54:00.000Z’ for column ‘date_of_birth’ I tried formatting the date within the controller, but this doesn’t save anything. What am I missing here? eidt.vue: <datepicker v-model="form.date_of_birth" name="Date of birth" /> ..

Read more

I’m using a dynamic query in Laravel Inertia, my pagination is bugging because every time i try to change the pagination the mount() method of vue runs. data() { return { form: this.$inertia.form({ search: this.filters.search, order: "asc", column: "code", size: 5, }), }; }, mounted() { this.$inertia.get(this.route("groups.index"), pickBy(this.form), { preserveState: true, }); }, watch: { ..

Read more

I want to have a dynamic sizing of my pagination, I’m using laravel vue and inertiaJS, I receive the value but can’t make it work on paginate inside when. This is the query. Group::where(‘company_id’, Auth::user()->company_id)->when($request->search, function($query,$term){ $query->where(‘code’, ‘LIKE’ , ‘%’ . $term. ‘%’) ->orWhere(‘name’, ‘LIKE’ , ‘%’ . $term. ‘%’) ->orWhere(‘description’, ‘LIKE’ , ‘%’ . ..

Read more

I’ve been trying to find the correct answer for my problem I know that the question has been asked before here and actually many other places, but no answers I found could suit my problem. The vue component FooterNewsletter.vue <template> <div class="lg:w-2/4 md:w-1/2 w-full px-8 border-l-2"> <p class="font-bold text-3xl"> Don’t want to miss the latest ..

Read more

I have a script tag from CoreUI in my app.blade.php <script src="{{ asset(‘js/coreui.js’) }}" defer></script> the problem is in every route page the script isn’t being called thus not working the functions inside, I tried to require it in my app.js require(‘./coreui’) but still doesn’t work. To make it work I need to hard refresh ..

Read more

this question is related vue.js version 3. I have a App.vue componenet which defines the layout of the website and the code is as follows. <template> <div> <shuzia-navigation /> <slot></slot> //passing data from a component inside this slot tag down the <shuzia-music-player/> down there. <shuzia-footer /> <div class="mt-20"> <shuzia-music-player /> </div> </div> </template> <script> import ..

Read more