Live-Coding: Laravel CRUD + Vue.js 3 Composition API

Подписаться 142 тыс.

Просмотров 70 тыс.

50% 1

This is a longer video of almost live-coding a simple Vue.js 3 + Laravel CRUD. There are a lot of tutorials around this topic, but not enough with the new Composition API.
00:00 Intro
00:48 Laravel API
07:12 Vue: Install & "Hello World" Component
12:58 Vue Composition API: Companies List
19:28 Delete Company Button
23:29 Create Form
30:50 Form Validation
32:34 Edit Form
Related links:
- Repository: github.com/LaravelDaily/Larav...
- Article version of the same video: laraveldaily.com/laravel-8-vu...
- My course "Vue.js 3 + Laravel 9 SPA: CRUD with Auth": laraveldaily.teachable.com/p/...
Related tutorials:
- Why Composition API? v3.vuejs.org/guide/compositio...
- Vue 3 Composition API vs. Options API markus.oberlehner.net/blog/vu...
- Reactive Variables with ref v3.vuejs.org/guide/compositio...
- - - - -
Support the channel by checking out our products:
- Enroll in my Laravel courses: laraveldaily.teachable.com/p/...
- Try our Laravel QuickAdminPanel: bit.ly/quickadminpanel
- Purchase my Livewire Kit: livewirekit.com
- View Laravel Code Examples: laravelexamples.com
- Subscribe to my weekly newsletter: bit.ly/laravel-newsletter

Хобби

Опубликовано:

15 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 202

@cajoue7200 2 года назад

Thank you, this was so very helpful to me. I appreciate that you took extra time with this - I also very much appreciate the shorter videos as they are easier to fit into my day ! :) The occasional longer form feels like special treat :D

@ush6939 2 года назад

thank you so much for this video im doing the transition from vue 2 to vue 3 and i found it pretty hard this video really gave me the key to start!!

@rizkymohi5028 2 года назад

thank you very much sir. this is by far the most understandable tutorial of how to use vue js 3 comp API i've ever watch. once again, thankyou

@oswaldogvzla 2 года назад

Excellent video, i'm fan of your channels , your publications are a reference and one of the best in my opinion. thank so much.

@yom35 8 месяцев назад

Thank you for this tutorial. Nice and short but still explaining stuff. I was looking for a tutorial that was not 8 hours long to start with :D

@tradewithtony 2 года назад

This is so good to be free, i really appreciate you're doing good job. stay blessed!

@fredlee960 2 года назад

I really appreciate for sharing your expertise with us sir, it means a lot though you won't know ....Thanks a lot

@adityakadam2256 2 года назад

Great video. Perfect usage of composition API. Thanks a lot.

@coljomkd 2 года назад

Amazing video. Everything is clear explained about Vue.Js Composition API. Thank you

@ericksanabria5657 Год назад

Thank you so much for sharing this valuable content. You have no idea, your channel has helped me in my first job. Greeting from Mexico!

@chlouis-girardot 2 года назад

Yeah VueJS ! Thanks a lot, I'm on Vue2 to 3 right now, perfect timing 👌

@CESARPEREZ-nv9ot 2 года назад

Gracias por compartir tu conocimiento con la comunidad, saludos desde México

@Thotsuya 2 года назад

I came here after months of saying I wouldn't switch to composition API, here I am, now using composition API, and definitely will not switch back, composables makes modularity so much easier

@Stoney_Eagle 2 года назад

Nice a real tutorial! 💯 This makes me miss laravel when I'm working with NodeJS, I need to write all the boilerplating myself 😔

@hesawm96 2 года назад

Thanks a lot for sharing this super useful live coding. 🙏

@gdogmalone 2 года назад

I think I’ll need to watch this video many times - it’s completely over my head! I keep promising myself I’ll learn vue, I just seem to always be continually learning laravel. As always with your work it is explained well, so if and when I learn it, it’ll likely be from you. Thanks

@gospher6342 2 года назад

He was speedruning lol

@dibbyo456 2 года назад

Haha.. I'm on the same boat as you.

@krunalpatel2228 2 года назад

well, Vue js is great for a project that has big forms and does too much manipulation based on data change. But SHOULD NOT use it unless it's necessary. With vue it takes twice the amount of time for the project than with normal laravel. Also not to forget we now have to maintain update for vue and it dependencies in the future which could be a real pain.

@davidlyons24 Год назад

MMMmm.. 🤔 I think the opposite, I check what not to learn. We can do amazing website without all this intermediary Vue mess. Everybody is now against jQuery or just plain JS. But with vue you finish with an absolute big bunch of minifiles that when you need to fix or modify something you don't know where to start. Great Laravel, great Laravel Daily but Vue I'm sorry NOT!

@283518 10 месяцев назад

Unfortunately, (and i still haven't learnt vue yet) the vue structure is very similar to the angular structure, which is a learning curve, but just speed running through his tutorial, I can see a lot of similarities, i just learned angular and so, this doesn't seem hard to learn and comprehend now but before learning angular, it would have, id suggest learning vue first perhaps and it will make the learning curve for angular a lot easier or vice versa.. I do like the vue method of validation and form submission a lot better than the angular native way

@boristanasic9167 2 года назад

one of the best video for laravel api + vue ...best regards

@chrissnoek906 Год назад

Really useful, keep them coming!

@surflaweb 2 года назад

Thanks for this masterpiece class, very useful. All updated! thks.

@gessegoncalves6493 2 года назад

Thank you so much, your videos have helped me a lot. From Brasil

@ricko13 2 года назад

by the title I'm likin' it already, gotta watch it ASAP 😎

@LotusSoftPvtLtd 2 года назад

nice tutorial for laravel 8 and vue 3 with composition api. Thank you

@LINTUme 2 года назад

Thank you very much! it helps me to make quick base for assessment task for a new job

@dibbyo456 2 года назад

That was extraordinary

@victoronwe906 2 года назад

Thank you a bunch... This was timely

@Kanexxable 2 года назад

I am a huge fan or your content you have really shown me how powerful laravel is . A word of advice The state that is exposed by a composable should not be able to be changed by the user directly. But by the methods you expose. To do this you pass refs into computed and readonly for reactive objects. By the way computed does return a ref so you'll be fine.

@AhmedElhadyEG 2 года назад

Great work , Thanks

@nunutch6041 Год назад

Thanks for very good explanation Sir , for beginner like me. very clear🙂

@arturkhachatryan63 2 года назад

woow nice work!!! 👍❤️

@OussamaElkhalifi 22 дня назад

Great Video. thanks for sharing

@fadyelias 2 года назад

Thanks a lot for a good work

@LaravelDaily 2 года назад

Want more? I have a full course "Vue.js 3 + Laravel 10 + Vite: SPA CRUD": laraveldaily.com/course/vue-laravel-vite-spa-crud

@mostafaharb8613 2 года назад

Thanks perfect video, to use ${variable} u need to define it in back quotation instead dof single quotation so instead of '${variable}' is should be `/your_path/${variable}` and now value would be read normally

@delaneywright4751 2 года назад

One of my favourite packages is laratrust with teams feature. Because it is in my opinion what laravel jet stream teams should of been instead of the structure they force upon you without being able to easily change it.

@NguyenVunguyenvu 2 года назад

Thank you!

@mutsukira 2 года назад

Thank you so much sir

@hassanfazeel2354 2 года назад

Great and thanks a lot

@devfreemax3578 2 года назад

Thank you soo much

@nicolasromero6144 2 года назад

Excelent!!

@vinhnguyenuc5119 2 года назад

Thank your

@edokhudeeda4139 2 года назад

Your are amazing

@targetx1733 2 года назад

I think you should venture more on vue 3, it is fascinating.

@stefanilic4178 2 года назад

I'm a simple man, I first press like, then watching the video :)

@ramazuu 2 года назад

Thank you for this vid! I'm a beginner and your explanation is really good. I learned lot! I hope you have an example video for custom login using Laravel and Vue 3 with Composition API. RU-vid mobile doesn't have the feature to search contents in a specific channel..

@ahmedhelal174 2 года назад

Thanks

@user-hk3te3ql5p Год назад

GOOOOOOOOOOOOOOOOOOOOOOOOOOOOD

@FlorianBrunnerwebdesign 2 года назад

Best Video on using composition api I found so far! Thanks a lot. Just wondering why would one not use Inertia and still use vue + api?

@LaravelDaily 2 года назад

Because some people are only front-end developers and don't know anything about Laravel.

@noelremasu 2 года назад

With this video I can finally wrap my heart around composition api application in real life. Thanks a lot. Next up.. I was wondering if you have it in your plan to shoot a tutorial in audio or video streaming and downloading app. E.g how can one build a podcast or music streaming site using laravel and vue 3? It will really be a great one

@LaravelDaily 2 года назад

No, not in plans. Cause the topic of streaming is way out of scope of only Laravel/Vue. But you can check this project: github.com/koel/koel

@phpisdead 2 года назад

best

@GergelyCsermely 2 года назад

Thank You! It is what I was searching for. This is the best explanation what I found about Composition API. Question: with composition API the variables could be accessed from different child component or I should use paralelly Vuex store too?

@LaravelDaily 2 года назад

It depends how you structure it. Vuex didn't go anywhere.

@behruzibrahim7080 2 года назад

Thanks a lot this video..I appreciate you are doing this tutorial. I would like you to make a video about server-side rendering (SSR) VUE.js app in laravel

@LaravelDaily 2 года назад

Livewire is the new SSR, in my opinion

@MustafaBirsoz 2 года назад

Cool

@ScenicITSolutions 2 года назад

@Laravel Daily Can you help me to make the Nested route in Vue3 in this video's example? I tried it but URL changes in the browser but not loading component attached to that route

@AgabalaVIDEOLARI 2 года назад

Please say me how to show success message this situation

@satashanofficial 2 года назад

Hi Povilas, it always been a great experience to watching your video, which is helping me to better every day. Thanks Can you make a video on topic, ****Convert laravel project to laravel package****

@LaravelDaily 2 года назад

My question is WHY would you do such conversion?

@satashanofficial 2 года назад

@@LaravelDaily i am working on laravel project and now my client wants me to convert the laravel cms into laravel package

@satashanofficial 2 года назад

@@LaravelDaily Please let me know can we do this, if yes then how?

@satashanofficial 2 года назад

Povilas! are you considering my suggestion?

@LaravelDaily 2 года назад

No sorry your case is really rare

@thomasnixon9585 2 года назад

is it not necessary to put a database interaction like Company::create() inside of a try{}catch{} block? Just wondering how you like to deal with error responses. Also, in the composable file destroyCompany is already async, why do you need to set async again when defining deleteCompany in the setup method? You should be able to just call the destroyCompany method that you pulled in from the composable file right?

@Mrvolfx 2 года назад

i have question, when i use VUE.js at laravel the code is render at client or at server

@develo777 2 года назад

thanks for sharing this! i want to ask about : {...form} i didn't ge it , please could you iluminate me

@netconsole2832 2 года назад

Why Axios DELETE, PUT and Patch Methods not working on Production server. any idea

@HernandoFarias 2 года назад

wanted to say hello, and thank you for all your videos! pd: what is the extension you use for filling the forms?

@anhtupham5504 2 года назад

It's Fake Filler.

@ufdiu3n8s2 2 года назад

Hey, thanks for amazing tutorial. Just wanted to ask, what is in your opinion best way to make routing on vue laravel website? Vue router, laravel or maybe inertia?

@LaravelDaily 2 года назад

It's totally personal preference

@alikarimi3332 2 года назад

Thank you . but I got 405 error in post request sending section.Can you help me please?

@Paltibenlaish 2 года назад

Thank you so much for this vue3 composition API explanation, I wanted to ask you which would be best way to implement filterable and searchable with pagination table on Vue 3

@LaravelDaily 2 года назад

I can't answer such broad question in a RU-vid comment

@Paltibenlaish 2 года назад

@@LaravelDaily you're right sorry for that maybe would you recommend datatables or any other package?

@wadday 2 года назад

on the destroy company method you've tried to use a single quote along with the variable which is why it shows an unsued variable hit there. it should use a back tick instead of a single quote. const destroyCompany = async (id) => { await axios.delete(`/api/companies/${id}`) }

@LaravelDaily 2 года назад

Of course. Duh. Thanks for the comment.

@ahmetatesce 2 года назад

Mr. Povilas, thanks to you, I am making great progress and my perspective has improved on many issues. First of all, I can't tell you how grateful I am to you. Thank you very much for sharing your time and knowledge with us. I have a little question for you: While experimenting with the Composition API, I can't get the user id from Auth::user() or auth()->user() when updating or deleting data. How can I access the user id in Laravel? I would be very grateful if you could reply or make a short time-lapse video. Best regards.

@LaravelDaily 2 года назад

I can't answer it, it's a situation that needs debugging in your project specifically

@Akosiyawin 2 года назад

I think if you're accessing Auth in api routes, it's not gonna work.

@ckgringoblogger9170 2 года назад

Best Vue Laravel crud class ever, would it be to much asking to create the guards to protect dashboard and access with ACL per role?

@LaravelDaily 2 года назад

I am planning to create it as a course on my laraveldaily.teachable.com a bit later in 2022

@Sir_Analyst Год назад

can i use breeze vue with this tutorial?

@user-hk3te3ql5p Год назад

thanks, BUT, how to upload image to company if we have image field ?

@onnewf9288 2 года назад

Hi mr povilas, thank you for your sharing I'm considering whether to use vue or livewire for my current project, could you please give me your thoughts on vue vs livewire , the advantages and disadvantages. I know there are lot of articles out there, just want to know yours. Thanks

@LaravelDaily 2 года назад

It's personal preference, you should work with whatever you're more comfortable with

@KastsEcho 2 года назад

Would it not be more practical and server efficient to delete the item from the array after the axios.delete call instead of calling axios.get to retrieve the list again when it should only be missing the one item from the existing list? (Aside from the edge case of potential new items that could be made at the same time by someone else, that is.)

@LaravelDaily 2 года назад

Yes, that was done exactly for that specific edge case of potential change in the items.

@nabeelyousafpasha 2 года назад

Thanks for your efforts. Here is a suggestion, don't you think that composable should not be responsible for redirects at routes for example after storeCompany in composable service is not responsible for redirect to index route. Appreciation for the rest.

@LaravelDaily 2 года назад

Yes it's a valid point, maybe another round of changes would be useful.

@malmeerkat 2 года назад

Thanks for the tutorial. Once logged in I am not able to log out with the app. Profile drop down not working. Does Vue influence the native JS in the template?

@malmeerkat 2 года назад

Placed id="app" on the tag on app.blade.php which resolved my issue.

@martinszeltins2045 2 года назад

Hey, what are your thoughts about using getters and setters on Models?

@LaravelDaily 2 года назад

In Laravel, i think it's overengineering.

@emreerel7041 2 года назад

but normal auth is not enough , api still accessible externally , you are just securing the route in web.php if im not wrong we have to protect api with sanctum or any kind of token - jwt or smt ty btw greate tutorial i learn this video and you a lot

@topalek 2 года назад

Can you help me? bg-colors of the create button are not working.

@max7579 2 года назад

I'm wondering if you can help me. Whenever my team makes changes to our database tables via a migration, e.g. to add a "role" column against the user (a simplified, not real example) that is "client" or "admin", I suggest we create a console command to update the historical records accordingly, rather than lumping in data changes to the migration as that's not where it belongs -- however this means that when I deploy to production I have to manually run the console command. Is there any way I can automate this process, without essentially building a "migrations" table for console commands and writing a scheduled job that checks for any console commands not in that table and running them? Thanks!

@max7579 2 года назад

I think I might ensure the console command has logic in to only run once (as it currently does) and then schedule it to run every minute. Then raise a PR weekly where required to clean up the old schedules and remove the then redundant console commands

@LaravelDaily 2 года назад

I've scheduled to shoot a separate video about it, can't answer in a short comment. Now I have quite a big queue of topics, so should publish something in 1-2 weeks

@yesman211 2 года назад

Hello I'm using Laravel+VueJs and now I'm struggling with hosting the project on IIS . i tried it and the website show only content on blade file not from Vue file

@jigneshmesvaniya4197 2 года назад

Thank you for the video. My concern is How can we use Create and Edit forms in a single component instead of using two different files?

@surflaweb 2 года назад

you can use bootstrap modals

@youssefelgharib7092 2 года назад

Great video !!!! But what about inertia js ?? is it good for creating SPA with Laravel or we should use laravel API instead ?

@LaravelDaily 2 года назад

It's a personal preference, there's no "should"

@youssefelgharib7092 2 года назад

@@LaravelDaily Thanks !!!

@andrejensen9550 2 года назад

Hi Mr. Povilas. Great video, but I have a problem with retrieving the table correctly, like at 19:22. I get the thead part of the table, but nothing shows up from the database. I can't seem to find out what i've missed.

@LaravelDaily 2 года назад

Sorry I can't debug it for you in a RU-vid comment

@andrejensen9550 2 года назад

@@LaravelDaily Thank you very much for quick answer! I just figured it out, by looking through the Github repository with fresh eyes. I forgot to add the use resource and request in the beginning of the controller. I don't know why it didn't auto add it.

@alvaroperezdiaz3679 2 года назад

When I try to login using composition api I take the user form api, but when I refresh the page, it dissapears

@ezequield.rodriguez4323 2 года назад

I just got stuck like in 12:50, the component is not rendered and I don't know why :/

@shyzjke 2 года назад

What about input clean after form submitting in Composition API? Who know?

@MarlonLCosta Год назад

do you recommend develop apps with this approach?

@LaravelDaily Год назад

It's a personal preference, this is one of the options.

@AneesKhan-uz4mz 2 года назад

povilas, show you advice to use this composition api in inertia?

@LaravelDaily 2 года назад

It's a personal preference

@erictetik7858 2 года назад

Hi from Australia, thanks for the great tutorial! I've run into a weird issue. Spent over an hour trying to troubleshoot myself but I can't seem to fix it. When I hit the "Create" button I just get redirected to the dashboard with no new record, regardless of what I enter into the form (blank, filled). Same issue before and after implementing validation. I added "console.log(data)" underneath "await axios.post('/api/companies/', data)" in companies.js to confirm that the fields are being fed through, and they are. I've even copy/pasted your code from GitHub and still not working. I think it's a more fundamental issue. Hope you can help, I really want to learn Vue3. Cheers Eric

@LaravelDaily 2 года назад

Hi Eric, I can't really help without debugging your code, I'm not a magician who can "guess" what you did wrong. Compare your code to my repository.

@omarmenchaca607 2 года назад

Hi Eric, I had same issue .. these 2 actions did the workk for me: (1) Go resources\js\composables\companies.js in storeCompany method erase last slash from url i.e. await axios.post('/api/companies', data) (2) Go app\Http\Requests\CompanyRequest.php chage return true inside function authorize()

@erictetik7858 2 года назад

@@omarmenchaca607 cheers for the recommendation. Unfortunately didn't work for me. Issue had less to do with the project's code. I had to modify my apache file to ensure https was being used, not http.

@GianmarcoGagliardi 2 года назад

12:40 We couldn't find a supported version of Vue in your project. Please ensure that it's installed (npm install vue). [webpack-cli] Error: Unable to detect vue version i dont understand why it gives me this when i launch npm run watch

@LaravelDaily 2 года назад

Maybe your npm/node version is too low?

@animeku4812 Год назад

what the name chrome extension your use for auto fild ?

@LaravelDaily Год назад

Fake Filler

@wildfireDZ 2 года назад

what is the advantage of using Vue Routers over Laravel own routes ? Seems way more complicated

@LaravelDaily 2 года назад

No full page refresh, with Vue.

@SOLIS55100 2 года назад

hi bro i have one quaesion for you . i am going to use vue.js with laravel for become a FullStck . which one best ApI composation api or option API , I think composation Api litle a bit confusing

@LaravelDaily 2 года назад

It's your personal preference

@markaguilar736 2 года назад

how to add password with bcrypt in rule ?

@nuriswanto7472 2 года назад

I don't know why I get the message Uncaught (in promise) TypeError: $setup.company is undefined I have followed all code like you but still error anyone can help me please?

@olegkiriluk4331 2 года назад

is there any analogue of debugbar for api ???

@LaravelDaily 2 года назад

Laravel Telescope

@suhardy003 2 года назад

i'm new to these stuffs but i have a question, does this composition api do the same thing vuex does?

@LaravelDaily 2 года назад

Pretty much

@suhardy003 2 года назад

@@LaravelDaily thanks for replying. i'm actually stuck in one situation for months and no solution yet. my problem is i have no idea how to communicate non parent-child components and watch the database changes when changed somewhere. do you have tutorial on how to solve this? i don't know how to explain it but it would be like a queue management system. when i hit call in a caller page, the value instantly changed in display page.

@LaravelDaily 2 года назад

Sorry I can't debug it for you in a comment, and I don't have a video for your specific situation.

@suhardy003 2 года назад

@@LaravelDaily it's ok. thanks anyway.

@jomari945 2 года назад

Is composition api enough to replace vuex?

@LaravelDaily 2 года назад

vuejsdevelopers.com/2020/10/05/composition-api-vuex/

@MauricioForeroGonzalez 7 месяцев назад

Do you have this same crud, but with vite?

@LaravelDaily 7 месяцев назад

Not exactly the same CRUD, but with Vite, as a course: laraveldaily.com/course/vue-laravel-vite-spa-crud

@MauricioForeroGonzalez 7 месяцев назад

@@LaravelDaily thank you

@chameeradinesh1221 2 года назад

Sir, how to send mail with attached many files using contact form in laravel 8?

@LaravelDaily 2 года назад

laravel.com/docs/8.x/mail

@chameeradinesh1221 2 года назад

@@LaravelDaily i want pass multiple files as array

@LaravelDaily 2 года назад

->attach(xxxxx)->attach(yyyyy)

@nikyabodigital Год назад

Is this a speed run?

@segayiandrew8084 2 года назад

i had issues with routing vue3 and laravel but found out this method was the best way Route::get('/{vue_capture?}', function () { return view('index'); })->where('vue_capture', '[\/\w\.-]*'); where the view is the initial view connecting all other components

@jacoferreira7352 Год назад

Could you please do a similar video using Laravel 9, Vue 3, and Vite?

@LaravelDaily Год назад

It would be absolutely the same, except for the small part about Vite, so not worth the full video. Have you watched this one? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-epMbfE37014.html