--- title: "View-Based Components" url: https://daily.dev/posts/view-based-components-tfldkksu3 source_url: https://laracasts.com/episodes/3914 type: article source: "Larablog" published: 2026-01-14T14:03:49.453Z updated: 2026-01-14T14:04:16.516Z tags: ["webdev", "php", "laravel"] reading_time: 5 upvotes: 43 comments: 1 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # View-Based Components **[Larablog](https://daily.dev/sources/larablog)** · 5 min read · 43 upvotes · 1 comments ## Summary Livewire 4 introduces view-based components as the default approach, allowing developers to co-locate PHP logic, Blade templates, and JavaScript in a single file instead of splitting them across multiple directories. Components are created with `php artisan make:livewire` and live in `resources/views/components`. JavaScript can be embedded using script tags, which Livewire extracts and serves as cacheable assets. The framework optionally uses emoji prefixes (⚡) to visually distinguish Livewire components from regular Blade components. For larger components, developers can convert to multi-file layouts using `livewire:convert`, which creates a directory with separate PHP, Blade, and JS files while maintaining co-location. Livewire 4 remains fully backwards compatible with class-based components from version 3, and all defaults are configurable through the published config file. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@sunyfilip** · 3 upvotes > It makes perfect sense to have this type of structure...it is not coincidence that nuxt and next are already prepared for route-based folder structure (components) and it is so much clear. You can easily guess where the file you need to edit is located. I like the way it is used for php as well 👌 --- Tags: [#webdev](https://daily.dev/tags/webdev), [#php](https://daily.dev/tags/php), [#laravel](https://daily.dev/tags/laravel) [View this post on daily.dev](https://daily.dev/posts/view-based-components-tfldkksu3)