Laravel 8 + Livewire + Typescript = Perfection
This stack blows my mind guys. Wow, Okay I’m so excited I can’t even know where to begin to explain how much I like this stack. Any way let’s dive right in.
Introduction
I love Laravel, like deeply like - it’s one of those frameworks that I recommend to all my clients, I mean it’s kinda forcing them otherwise we can’t work together… that is how much I love it. On a side note I like to use Laravel Voyager as the admin dashboard, it’s just `Bhurugwa ne Bhande` but I’m not going to write about that today.
Typescript ~ well Hello! that’s everything you need as a language, documentation and linting, you know programmers we’re are lazy — that’s all in one.
Livewire ~ Thanks to Caleb Porzio it’s like a whole universe of code created. Of cause documentation does not cover everything but maaan! it’s so great.
So with all that in mind I decided to setup a project with my best stack.
Installation
Laravel ~ `laravel new lara-wire-typescript ` //Assuming composer and laravel is installed globally. Otherwise please refer to Laravel Installation
Livewire ~ `composer require livewire/livewire`
Typescript
- Install typescript globally `npm install -g typescript` //Assuming you have node v 10+ installed
- Install dependencies in your project `cd lara-wire-typescript && npm i `
3. Install required typescript dependencies in your project ` npm i ts-loader typescript -D`
4. Initialize Typescript configuration file `tsc — init`
paste the following code in
5. Webpack Configuration your
6. `Hello World` & log livewire event — well why not
7. Create a new file `resources/js/typescript/hell-world.ts`
8. Code
9. Create file livewire.js
10. Include your file bellow livewire scripts `<script src=”{{asset(‘js/livewire.js’)}}”></script>`
11. Create livewire component `php artisan make:livewire hello-world`
12. Include in the body of your blade file `@livewire(‘hello-world’)`
13. In HelloWorld.php
## Final
Compile your code, fix any typos and import errors *I’m no perfect*
Run your code. You should see a `dd` on the screen and `happy coding` in your browser’s console.
**For Real** ~ Happy Coding
### Credits