This is high quality content! This pattern is something absolutely everyone will run into the need to tackle at some point when developing web applications.
Thank you very much for doing this video. Great video, but I'm feeling a little confused. I've done a few projects with Livewire but I'm still a bit new. In the video, there's no mention what file you're editing. For example, what file has the x-datepicker component. I'm guessing for demonstration purposes it's in the welcome.blade file. Please, any chance we can get a copy of the project code for comparison? :)
Great to hear! I am using a fullpage Livewire component (called EventForm) which is directly loaded from the routes file. There is github gist in the description of the video which contains the code, I hope that will clear up some of the confusion.
@@tallprogrammer I'm still having some issues. I forgot to mention in my original post is that this is a fresh Laravel install with Laravel Breeze. After looking over the gist you mentioned and following along with the video, I was able to get the event form to render, however, the controls do not. All I see are white input boxes where the datepicker fields should be and no calendar icons on the right. I created a new blade file called fpdemo and added the @livewire('event-form') include statement in there. If I add it to welcome.blade, I can't get the form to render properly. I'm thinking that the tailwind code in the welcome blade file is a very stripped down version. Anyway, I am up to time index 2:48 where you added the code: js code flatpickr('#myDatepicker', {}) Some additional issues: I'm not getting the same colors you have when rendering the fpdemo blade file. I hope this makes sense. lol :) Thank you for your assistance btw!! :)
I'm afraid some of my videos are not very beginner friendly. I assume the viewer already knows the basics of Alpine and Livewire before running into the topics I present. I would recommend first watching the screencasts in the Livewire documentation and also checkout what content is available on Laracasts to get started. I actually use Jetstream which can be installed with Livewire and tailwind out of the box. It might very well be that Breeze doesn't do that. So make sure you have Livewire intalled as per the livewire docs. Jetstream creates an app.blade file which I use as the layout for my Livewire components and which has Livewire and Tailwind included and to which I have added the alpine cdn links. Also make sure you have tailwind installed and have run npm dev or npm watch after creating the components, because tailwind scans the blade files to know which classes it should actually add to your .css file. The is actually a separate component with a font awesome calendar svg in it. Hope this is another step in the right direction in your Livewire journey.
@@tallprogrammer In my install of Laravel, I noticed that alpine v3.0.6 was installed. I could be wrong but suspect that will make a difference in what I'm seeing compared to your video. The alpine website as also changed. In your video, starting at time index 3:20, I'm not seeing the same code that you copied from the site.
Hi...one question: I've added the "$watch"er from your update notice but then I get the following error (in the console): Alpine Expression Error: value is not defined Expression: "value" Any idea what's wrong here?
This is high quality content! This pattern is something absolutely everyone will run into the need to tackle at some point when developing web applications.
This video is SUPER. Need more like this one... Thanks!
Yes I learned something. Thank you. Graag wat minder toetsenbord geluiden.
Awesome. That’s exactly what I’ve been looking for. Thank you for sharing…👍
Awesome
Great
Thank you very much for doing this video. Great video, but I'm feeling a little confused. I've done a few projects with Livewire but I'm still a bit new. In the video, there's no mention what file you're editing. For example, what file has the x-datepicker component. I'm guessing for demonstration purposes it's in the welcome.blade file. Please, any chance we can get a copy of the project code for comparison? :)
Great to hear!
I am using a fullpage Livewire component (called EventForm) which is directly loaded from the routes file.
There is github gist in the description of the video which contains the code, I hope that will clear up some of the confusion.
@@tallprogrammer I'm still having some issues. I forgot to mention in my original post is that this is a fresh Laravel install with Laravel Breeze. After looking over the gist you mentioned and following along with the video, I was able to get the event form to render, however, the controls do not. All I see are white input boxes where the datepicker fields should be and no calendar icons on the right. I created a new blade file called fpdemo and added the @livewire('event-form') include statement in there. If I add it to welcome.blade, I can't get the form to render properly. I'm thinking that the tailwind code in the welcome blade file is a very stripped down version. Anyway, I am up to time index 2:48 where you added the code: js code flatpickr('#myDatepicker', {}) Some additional issues: I'm not getting the same colors you have when rendering the fpdemo blade file. I hope this makes sense. lol :) Thank you for your assistance btw!! :)
I'm afraid some of my videos are not very beginner friendly. I assume the viewer already knows the basics of Alpine and Livewire before running into the topics I present. I would recommend first watching the screencasts in the Livewire documentation and also checkout what content is available on Laracasts to get started.
I actually use Jetstream which can be installed with Livewire and tailwind out of the box. It might very well be that Breeze doesn't do that. So make sure you have Livewire intalled as per the livewire docs. Jetstream creates an app.blade file which I use as the layout for my Livewire components and which has Livewire and Tailwind included and to which I have added the alpine cdn links.
Also make sure you have tailwind installed and have run npm dev or npm watch after creating the components, because tailwind scans the blade files to know which classes it should actually add to your .css file.
The is actually a separate component with a font awesome calendar svg in it.
Hope this is another step in the right direction in your Livewire journey.
@@tallprogrammer In my install of Laravel, I noticed that alpine v3.0.6 was installed. I could be wrong but suspect that will make a difference in what I'm seeing compared to your video. The alpine website as also changed. In your video, starting at time index 3:20, I'm not seeing the same code that you copied from the site.
@@jimmacdiarmid8230 Yeah Alpine 3 is a bit different from Alpine 2
hello, is there a way to change the color of the input that is using flatpickr? thanks
Hi...one question:
I've added the "$watch"er from your update notice but then I get the following error (in the console):
Alpine Expression Error: value is not defined
Expression: "value"
Any idea what's wrong here?
Hi,
I have created a Gist on Github and added it to the description of the video for you. Hope that helps.
Cheers
@@tallprogrammer Great - this works like a charm now... ;-)
No CDN