Livewire Components in a Different Directory

When creating a new Livewire component they will be placed in the same directory. But, there may be some instances where you want to place those Component Controllers and views in a separate location. In this short tutorial I will show you how to do that.

Creating a Livewire Component

To create a new livewire component (after creating a new livewire project), you can simply run:

php artisan make:livewire Post

This will create a new component Post controller and a Post view. Your component controllers are stored inside of the app\Http\Livewire\ folder, and your livewire views will be stored inside of the resources\views\livewire folder.

If we want a better way to organize our livewire components we may want to create components in a different location. Let's cover that next.

Creating Livewire Components in a new folder

Let's say that we want to create a new Post Editor component and we want to store it in it's own post folder. We can easily do that by appending a . to the directory we want to create the new component.

Here is how we would store our new Editor component inside a Post folder.

php artisan make:livewire post.editor

Now, our new component controller will be located at app\Http\Livewire\Post\Editor.php, and our view located at resources\views\livewire\post\editor.blade.php.

Excellent! But, what if we wanted to store it in a completely separate folder altogether? To do this, you can publish the Livewire config file by running:

php artisan livewire:publish --config

If you look inside of the new file located at config/livewire.php, you'll see the following contents in the file:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Class Namespace
    |--------------------------------------------------------------------------
    |
    | This value sets the root namespace for Livewire component classes in
    | your application. This value affects component auto-discovery and
    | any Livewire file helper commands, like `artisan make:livewire`.
    |
    | After changing this item, run: `php artisan livewire:discover`.
    |
    */

    'class_namespace' => 'App\\Http\\Livewire',

    /*
    |--------------------------------------------------------------------------
    | View Path
    |--------------------------------------------------------------------------
    |
    | This value sets the path for Livewire component views. This affects
    | file manipulation helper commands like `artisan make:livewire`.
    |
    */

    'view_path' => resource_path('views/livewire'),

...

In this file you can change the class_namespace, and the view_path to the location of your choice.

Conclusion

Livewire is still being created and new functionality is being added regularly, so be sure to check out the repo and learn more about all the cool things that are going on with this project.

If you want to know what kind of things can build with Livewire, be sure to check around the DevDojo. Here, we leverage the awesome powers of Laravel and Livewire 😉