#### Category : vuejs3

In Laravel 8 vuejs3/inertia app I have a mall form and trying to submit data I got [Vue warn]: Unhandled error during execution of native event handler error. I do : <template> <form @submit.prevent="storeAd" class="w-full"> <div> <textarea name="ad" rows="3" class="border rounded px-2 py-2 w-full" :placeholder="’Post ad body ${$page.props.user.first_name} ${$page.props.user.last_name} …’" v-model="form.body"></textarea> </div> <div class="flex justify-between ..

i using inertia vue3 with laravel i need to know how to add global filters i tring to using this referrance didn’t work. my app.js createInertiaApp({ title: (title) => ${title} –${appName}, resolve: (name) => require(./Pages/${name}.vue), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .mixin({ methods: { .. Read more In a vue page I added a ImageUpload component, following this tutorial: https://www.youtube.com/watch?v=kvNozA8M1HM It works more or less. No errors, but it only shows my image and a ruler. I can zoom using the ruler, but it does not show boundaries, circle etc. It is completely different from the example in the tutorial… It is .. Read more Please help me fix this problem. I create application using Laravel 8, Blade templates and Vue 3 components. In that i have basic routing in Laravel. I want to add nice looking menu in admin panel https://github.com/yaminncco/vue-sidebar-menu. Unfortunately, I don’t know how to pass my menu structure to this component. When I use the example .. Read more i am trying to update text when i send request to Laravel controller, but i am getting error: 500 internal server error Uncaught (in promise) Error: Request failed with status code 500 console.log is showing text and values which i am trying to send to controller: id:16 text:aa vue js code: const onEdit=(todo)=>{ // var .. Read more jetstream application I have installed vue3-date-time-picker with the below code <Datepicker :disabledDates="disabledDates" @click="doSomething" v-model="date" inline autoApply :minDate="new Date()" :maxDate="maxdate" :enableTimePicker="false"></Datepicker> setup() { const date = ref(); var today = new Date(); const mxdate = new Date(today.getFullYear(), today.getMonth()+2, today.getDate()) return { date, maxdate } }, methods: { doSomething(){ alert(this.date) alert("hello") console.log("Check date") }, } When I .. Read more I use this package https://github.com/dotansimha/graphql-typed-document-node and I usually call it like this useQuery(peopleDocument, variables). But laravel lighthouse has a complex where plugin which automatically adds all types for various queries where conditions for example { people(where: { column: AGE, operator: EQ, value: 42 }) { name } } I would like to allow users to .. Read more In a Laravel + Vue3 + Inertia project which setup using Laravel Mix, how we can create front-end tests? Especially, I have no idea how to handle Inertia‘s Share Data, usePage() and useForm methods? The first error I’m facing is: TypeError: Cannot read properties of undefined (reading ‘someSharedData’) 2 | 3 | export const handleSometing .. Read more I have the following variables in my local .env: MIX_APP_URL=http://localhost MIX_TEST_1=${MIX_APP_URL} MIX_TEST_2="${MIX_APP_URL}" MIX_TEST_3=$MIX_APP_URL This gives me the result (it is the result I expect in my deploy): In my deployment on Heroku I have the following: When I run the command heroku config I get the following variables: And in the deploy I get the ..

I don’t know if I’m tired but I can’t seem to be able to find the problem. I have a search route like this Route::get(‘/search/{city}/{industry}/{input?}’, [SearchController::class, ‘getPeople’]); And a search button like this <Link :href=’"/search/"+search.city+"/"+search.industry+"/"+search.input’>Search</Link> The Link is imported from inertiajs import { Link } from ‘@inertiajs/inertia-vue3′; Here’s the problem This works fine on localhost. ..

I’ve built a primitive Content Management System with Laravel Nova in a Vue3/Laravel8 app. Being the noob I am, I am using axios.get to get image links and markdown from a database and assign it to a reactive state like so: <script setup> import {reactive} from ‘vue’; import DOMPurify from "dompurify"; import marked from "marked"; ..

I’ve built a Vue3/Laravel8 app and linked the frontend to a database with Laravel Nova. Problem is that now my frontend has to wait for the database links for the image files every time the app is refreshed or a new router link is loaded. This kinda screwed up the benefit of having a Vue ..

I followed the Nova doc and linked a Markdown field to a TEXT database type: Markdown::make(‘Content’, ‘content_text’) I want to render it in the right format on my web app: but it renders just the string content abolishing the format: The field data is acquired like this: const state = reactive({ content: "" }) axios.get(‘/donate’) ..

I followed the Nova doc and linked a Markdown field to a TEXT database type: Markdown::make(‘Content’, ‘content_text’) I want to render it in the right format on my web app: but it renders just the string content abolishing the format: The field data is acquired like this: const state = reactive({ content: "" }) axios.get(‘/donate’) ..

I am working on a Vue3/Laravel8 app, that has to support enlish and arabic languages. Problem is that there is a huge font-size difference between the en and ar locales: I’ve been looking for a while now for a way to change the arabic font-size but it doesn’t seem simple. First I tried finding a ..

I habe this field function inside my Resource: public function fields(Request $request) { return [ ID::make(__(‘ID’), ‘id’)->sortable(), Stack::make(‘Headings’, [ Text::make(‘Heading (en)’), Text::make(‘Heading (de)’), Text::make(‘Heading (ar)’), ]), Stack::make(‘Content’, [ Text::make(‘Content (en)’), Text::make(‘Content (de)’), Text::make(‘Content (ar)’), ]), Image::make(‘Image’)->disk(‘public’)->prunable(), ]; } which produces this view: but as soon as I want to create/edit an entry, it only shows .. Read more I am building a simple crud just to try Inertiajs and on my delete action I expect the page not to move as during any ajax call. It however kind of reloads the page and the scroll position changes. Is this expected behaviour ? Please see my code: Controller: public function destroy($id) { Client::find(\$id)->delete(); return ..

So, I’m pretty new to Vue and trying to figure out how to pass data between components. I have a search bar/form in my Header Component where I do a axios-request to get data from the SearchController. Now, how do I pass that data to my Search.vue file/template? This is my structure. Search.vue <MainLayout> Search ..

I want to implement router-view in my (Laravel8/Vue3) project and everything works fine except that querySelector inside app.js returns null. Before I used app.vue as my proxy component to load all other components but since I need to load new pages with router-view (which now occupies app.vue) I had to create a new proxy component: ..

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 ..

I am trying to send contact form information from a Vue 3 component to my email address with Laravel 8. The first step is to validate the request (which works) and then it shall be sent to an email address. There seem to be many different approaches for this, which I find a bit confusing. ..

I am using Vue 3 and Laravel 8 and am trying to build a simple form component in Vue and send a request to Laravel with axios.post. For whatever reason I am getting an error response of 422 that tells me, that the information passed to the backend is unprocessable. I am logging the passed ..