Laravel 7 Blade Components

Blade is a king of templating engine in laravel that permits you to use plan php in your view. Developers were introduced with new class based blade syntax for creating components in laravel 7. If you're conversant in VueJs components you'll find the thought is same but in PHP way

Laravel 7 Blade Components

By creating a blade component you are following DRY ( don't repeat yourself) principle . It means you'll reuse it in your project. So lets begin :

So lets begin :
First create a component by this command :

 php artisan make:component Alert

This command will generate two files
app\View\Components\Alert.php

this file handle variables and functions of the blade component.

resources\views\components\alert.blade.php

Now you can call this component in your project by "<x-alert>" , so you can see "x" is used to access component ,
now we would like to pass a variable name "title" within the component

<x-alert title="This is title"> </x-alert>

now open "app\View\Components\Alert.php" and add title variable in the class

 <?php

 namespace App\View\Components;
 use Illuminate\View\Component;

 class Alert extends Component
 {
    /**
     * The alert title.
     *
     * @var string
     */
    public $title;

    /**
     * Create the component instance.
     *
     * @param  string  $title
     * @return void
     */
    public function __construct($type)
    {
        $this->title= $title;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
 }

Now $title property is accessible in our "alert" blade element. You be able to outline additional variables here and might access it within the blade element such as you can pass message or style of the alert.

more examples for the alert messages

Here we've passed 2 variables, "type" is comparable like title we tend to passed in higher than example and second is "message" however within the message variable we tend to area unit passing a PHP variable value.

now update your alert.blade.php with

<!-- /resources/views/components/alert.blade.php -->
 <div class="alert alert-{{ $type }}">
    {{ $message }}
 </div>

Real life example:

<!-- /resources/views/components/alert.blade.php -->
 <div {{ $attributes->merge(['class' => 'p-6 rounded-lg shadow-lg']) }}>
   <div class="text-xl text-orange-500">{{ $title }}</div>
    <div class="mt-4">
        {{ $slot }}
    </div>
 </div>

call it in your project:

<x-panel title="Update Your Info!" class="max-w-2xl">
    <h1>I AM IN THE SLOT</h1>
 </x-panel>

Thank you,🤗

Type Casting in Laravel

Casting a value means changing it to (or ensuring it is already) a particular type. Some types you might be familiar with are Integer or Boolean. Simply put, type casting is a method of changing an entity from one data type to another.

Type Casting in Laravel

Why should I care about type casting :

So, When you store numbers in database - they are returned as string by default. But type casting allows you to cast them as integer, real, float or Boolean you can convert 1 and 0 in your database to true and false

Let's do it ...

So in your model you can write :

 protected $casts =  [
    'status' => 'boolena',
 ]

It'll convert status(1,0) to true or false. so when you fetch any data from table it'll convert status column to true or false. you don't need to write any logic like this ...

if($post->status == "1"){
   // show status active 
 }else{
   // show status inactive
 }

Array & JSON Casting:

Additionally, if your table consist a column which stores serialized JSON string and you want that particular column to be automatically deserialize the attribute to a PHP array when you access it on your Eloquent model, you should use array cast. You can do it like this.

So, you can store JSON tags data into post table , but while fetching the posts you can convert it automatically into PHP array so now you can avoid creating tags table.

Conclusion:

As you can see, Eloquent attribute casting has a ton of potential to free us up from unnecessary repetitive logic, and also sneakily makes it a lot easier to store data in JSON in our database. Good Stuff!

Most Important Topics of VueJs Router

Most Important Topics of VueJs Router:

In this tutorial we will learn Most Important Topics of VueJs Router , we will cover most of the important topics which will help you to understand batter. I assume you already familiar with vuejs router.

Dynamic routing

If you wish to pass slug or id specially vue page then dynamic routing will assist you.

Here ArticleDetail could be a vue page or guide wherever we tend to write everying concerning the article detail. thus we will access slug in this page with the assistance of '$route.params.slug'; and additionally we will build little deep routing additionally /user/:username/article/:articlce_id

Reacting to Params Changes

If you show details of article pages and on a similar page you wish to list different articles in carousel and once the press that carousel you wish to alter the content of the article in line with slug.

Catch all (404 Not found Route)

Write it at the top of the all routes.

Nested Routes

Composed of elements that area unit nested multiple levels deep.

Note that nested ways that begin with / are going to be treated as a root path

In the user guide we'd like to write down

<router-view />

So the youngsters routes guides are going to be displayed within the user template.

Programmatic Navigation

Named Routes

you'll be able to provides a route a reputation within the routes choices whereas making the Router instance:

{path: '/user/:userId',name: 'user',component: User}




  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

Redirect routes

Redirecting is additionally worn out the routes configuration. To send from /a to /b

{ path: '/a', redirect: '/b' }

Global Before Guards

Global before guards are called in creation order, whenever a navigation is triggered. Guards is also resolved asynchronously, and therefore the navigation is taken into account pending before all hooks are resolved. this may facilitate your to privatised some routes.

Now within the routes.js file we are able to add meta fields, which route has to be authenticated. Helpful for authentication

{ path: '/foo',component: Foo,meta: { requiresAuth: true }

Scroll Behavior

So after you navigate to a different page you would like to regulate scroll behaviour , like when user enters on the page you wish to scroll on the highest of the page you'll define it in routes.

you'll be able to add active category additionally with the assistance of vue router.

Lazy loading

The JavaScript bundle can become quite large When building apps with a bundler, and thus affect the page load time. it would be more efficient if we are able to split each route's components into a separate chunk, and only load them when the route is visited.

Thankyou