13 FREE Livewire Components I've Found

hello guys after talking about laravel livewire from my point of view with my live market and my ideas on my courses i decided to look at the market what other people have released around livewire and on top of livewire so i searched livewire what githubcom to find interesting projects repositories and tools let's take a look what i found and this video will be rapid fire off links that can be useful if you use livewire first you should take a look at the live wire itself its repository it's not just the live wire itself but a few plugins so probably the most practically useful in my opinion is sortable which can allow you to sort with drag and drop easily but then there are a few more plugins to use turbo links and then to add support for using vue components within livewire not sure why would you need to do that i haven't done it in my career but there is a plugin for that next i want to mention probably one of the most popular tools on the market off livewire these days is filament admin panel it's not just admin panel it's kind of like a kit with admin panel that uses form builder table builder and a few plugins so it's kind of its own ecosystem and recently dan herron tweeted about the release of version two of admin panel on my channel i have a quick review of version one a bit older but to get the idea how it works you can watch that video i will link that in the description below and also all of the tools that are mentioned in this video the links to them will be in the description let's move on next we have two components branded under wire elements authored by fellow hermans from the netherlands and one of them is wire elements model so you can easily show the model window let's take a look at the official twitter with a quick 30 second clip so i will show part of that so when you click a button you can open the model window then you can close it and if you take a look at the documentation it's something like this so there's model component and then to open that you just emit the event of open model or other parameters are used and there's a lot of syntax things that you can add there's a child model as well i probably will create a separate video some time reviewing that one with its capabilities so is at wire elements model another popular livewire component from the same author filler is spotlight and i do have video review about that so i will just show a brief clip from that review how it works so on any page at any moment you could click some shortcut combination and call this window to enter something to search for something or any other ways that you can use that spotlight for example for search or for any other command and then there's a parameter to search for and you can find for example a user here so this is laravel spotlight by wire elements it's really easy to integrate actually you need to create your own spotlight command inside of that it's kind of like laravel code you execute is kind of like a job and then you just kind of attach that command or sign that command on the event that you actually want to use it for next we have this guy andres centibanis who has three at least three popular repositories around livewire which is livewire calendar livewire charts and livewire select let's take a look one by one livewire calendar and i have a video review of that and i will link that in the description below so this is a calendar with drag and drop capability so for example you can drag events like this in this gif preview this is one thing by andreas another one is livewire charts let's take a look is there any preview here yeah there is and you can take a look at that gif so it's like a normal laravel chart but with live wire and there's also a demo repository you can click around so it all comes down to the specific components of for example line chart or pie chart or column chart or area chart and this is kind of a rough syntax how you would create that chart so that's number two by address and then let's take a look at live wire select if we scroll down we have a select of depending drop down so for example you can choose brand and then you can choose a model and it's all pretty easy to integrate so you have live wire select with options and then at the bottom let's take a look at an example of get depending value for example so this component is mostly useful i think so at least in my experience for depending drop downs where you can choose one value and the other value list will automatically refresh next we have wire ui and this list by the way is in no particular order of popularity or anything wire ui is a library of components to empower your laravel and live or application development and this comes from this guy pedro oliveiras you can follow him on twitter and if you look at the docs there are various components so form components for example to use in your projects and here's for example the code x input for icon user for example two icons input in the code would be icon user right icon pencil and a lot of other options around input if for example we go to daytime picker and look at the code x daytime picker would be your solution for the wire ui version of your element so you can take a look at more documentation and follow wire ui on github or the author on twitter next we have three examples of data tables in livewire and one of the latest one but quite popular is live wire power grid which looks like this if you take a look at the gif so you can filter you can search you can export and a lot of other features in the power grid it works with bootstrap 5 and tailwind 2 and a lot of features are inside so this is one of the options another option is from a guy well known guy in larval community anthony rappa rapa soft it's live wire laravel live wire tables here's a screenshot of the design or another design so there's dark mode as well and there's also bootstrap 4 bootstrap 5 and tailwind and the basic example is something like this so you define the columns and you get the table as a result and a third option that i found for data tables may be less known and seems quite a lot of issues and pull requests so i would maybe classify that as abandoned package because of that but also you can try it out livewire data tables there's also live demo so you can try it out maybe it will satisfy your personal needs it's medic 1 systems live wire data tables and of course at the end of the video i will mention my own set of components live market so currently there's 35 components and if you have any more idea for components that are missing from the market shoot in the comments below and also if you know other existing companies that i missed in this video also add in the comments i hope you will like livewire as much as i do and you will use it in your projects and see you guys in other videos

Channel: Laravel Daily

Views: 1,832

Keywords:

Id: h1K9IFfPU68

Length: 6min 44sec (404 seconds)

Published: Sun Dec 19 2021