PHPackages nickpoulos/laravel-svelte-direct - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. nickpoulos/laravel-svelte-direct ActiveLibrary[Templating & Views](/categories/templating) nickpoulos/laravel-svelte-direct ================================ Use Svelte components seamlessly in Laravel Blade Templates 0.1.0(4y ago)19112[3 issues](https://github.com/nickpoulos/laravel-svelte-direct/issues)MITPHPPHP ^8.0 Since May 23Pushed 4y ago1 watchersCompare [ Source](https://github.com/nickpoulos/laravel-svelte-direct)[ Packagist](https://packagist.org/packages/nickpoulos/laravel-svelte-direct)[ Docs](https://github.com/nickpoulos/laravel-svelte-direct)[ GitHub Sponsors](https://github.com/nickpoulos)[ RSS](/packages/nickpoulos-laravel-svelte-direct/feed)WikiDiscussions main Synced 1w ago READMEChangelog (3)Dependencies (8)Versions (6)Used By (0) [![](readme.jpg)](readme.jpg) [![Latest Version on Packagist](https://camo.githubusercontent.com/f9ec6d9df13ef666378e1189f3ec031ddcbe5c1d6178a8acca52922987d1fe2a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e69636b706f756c6f732f6c61726176656c2d7376656c74652d6469726563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/nickpoulos/laravel-svelte-direct)[![GitHub Tests Action Status](https://camo.githubusercontent.com/df2e88d16c7b189187a958ac4fa525c67d1de8bb08bf92ab988a536d3b5410f6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6e69636b706f756c6f732f6c61726176656c2d7376656c74652d6469726563742f72756e2d74657374733f6c6162656c3d7465737473)](https://github.com/nickpoulos/laravel-svelte-direct/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/c885a09ab3a15ac8b08e51f173f14dde7945ea62eee58d0985e0c7724a1b654b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6e69636b706f756c6f732f6c61726176656c2d7376656c74652d6469726563742f436865636b253230262532306669782532307374796c696e673f6c6162656c3d636f64652532307374796c65)](https://github.com/nickpoulos/laravel-svelte-direct/actions?query=workflow%3A%22Check+%26+fix+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/0f758cc7ea751954fce909b40b9532fc7f121ab00f482a053d1c18308aeddff8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6e69636b706f756c6f732f6c61726176656c2d7376656c74652d6469726563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/nickpoulos/laravel-svelte-direct) What? ----- [](#what) Use Svelte Components from within your Laravel Blade Templates -- totally seamlessly. Why? ---- [](#why) Modern JavaScript has been a gift and a curse. An amazing gift for developing front ends, plus a whole lot of cursing trying to get it all configured and setup. Things that used to be very simple became increasingly complex overnight. With build steps, webpack, SSR, code-splitting, and everything else, it can get overwhelming quick. There have been several awesome attempts to get the best of both worlds, especially within the Laravel community. Projects like Livewire and Alpine.js are amazing and really inspired the creation of this project. Lately I have really taken a liking to Svelte, a different take on the typical React/Vue style application. It was refreshing to get declarative, reactive, single file components, without all the boilerplate. But coming from PHP & Laravel, I still want my Blade templates and server side rendering (ya know the old school way). Normally in this situation, Laravel is just there to serve the shell of the DOM, and then have Svelte/Vue/React take over your entire body tag, or very large chunks of your DOM. But I like eating my cake too, and so this little project was born. How? ---- [](#how) This package has two main pieces. - A Laravel Mix plugin that compiles each of your Svelte components into their own bite-sized JS files - A Blade Pre-Compiler that scans Blade templates identifies your Svelte component tags, and loads the right component JS automatically ### Install Laravel Svelte Direct [](#install-laravel-svelte-direct) ``` composer require nickpoulos/laravel-svelte-direct ``` ### Configure Laravel Mix [](#configure-laravel-mix) webpack.mix.js ``` const mix = require('laravel-mix'); require('./vendor/nickpoulos/laravel-svelte-direct/js/mix'); mix.svelteDirect('resources/js/Components', 'public/js'); ``` ### Write Your Svelte Components [](#write-your-svelte-components) Write your Svelte components as your normally would, except for two small additions that we will add to the top of our file. Both are part of the official Svelte docs/spec and are not custom syntax. ``` ``` The options tag tells Svelte (and Svelte Direct), what the component's HTML tag should be. Normally this technique is only used in Svelte when compiling to WebComponents (more on that later). But it is the perfect mechanism for our cause as well. The comment tag tells Svelte to ignore when we don't have `customElement` set to true. ### Configure Blade Template [](#configure-blade-template) In your applications's main Blade layout/component, add the `@stack('sveltedirect')'`above your ending `` tag. Feel free to add your Svelte component anywhere inside the Blade HTML. You will notice the tag we use in the HTML below matches the `` tag attribute above. example.blade.php ``` My Example App // tie your components together using vanilla js or something ike alpine @stack('sveltedirect') ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Nick Poulos](https://github.com/nickpoulos) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 26 — LowBetter than 43% of packages Maintenance17 Infrequent updates — may be unmaintained Popularity18 Limited adoption so far Community7 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~10 days Total 3 Last Release 1802d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/86eb716fc596f9c96b4ff794d367dc827f2f5069de7d1dab74c3156411421a86?d=identicon)[nickpoulos](/maintainers/nickpoulos) --- Top Contributors [![nickpoulos](https://avatars.githubusercontent.com/u/3959529?v=4)](https://github.com/nickpoulos "nickpoulos (50 commits)") --- Tags laravelnickpouloslaravel-svelte-direct ### Code Quality TestsPHPUnit Static AnalysisPsalm Type Coverage Yes ### Embed Badge ![Health badge](/badges/nickpoulos-laravel-svelte-direct/health.svg) ``` [![Health](https://phpackages.com/badges/nickpoulos-laravel-svelte-direct/health.svg)](https://phpackages.com/packages/nickpoulos-laravel-svelte-direct) ``` ### Alternatives [ryangjchandler/blade-capture-directive Create inline partials in your Blade templates with ease. 8222.2M12](/packages/ryangjchandler-blade-capture-directive)[spatie/laravel-blade-comments Add debug comments to your rendered output 177325.5k](/packages/spatie-laravel-blade-comments)[vormkracht10/laravel-mails Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app. 24149.7k](/packages/vormkracht10-laravel-mails)[daikazu/laravel-glider Start using Glide on-the-fly instantly in your Laravel blade templates. 882.3k](/packages/daikazu-laravel-glider)[combindma/dash-ui A streamlined and stylish UI component library for Laravel Blade, crafted with TailwindCSS and AlpineJs for simplicity and elegance. 631.4k](/packages/combindma-dash-ui) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)