Let's finish up this series by taking a look at how we can make use of Laravel and Svelte together. The options are very similar to the ways we can use Vue or React with Laravel as well. So the first option is to drop in Svelte components into your Blade Vue. So I found this package, which is a scaffolding tool that sets up usage of Svelte and Laravel Blade components. However, it's a bit old and hasn't been updated for the latest versions of Laravel and php. But since it's just a scaffolding tool, we can just read through the code and do everything ourselves manually.

But since it's just a scaffolding tool, we can just read through the code and do everything ourselves manually. So I have a blank Laravel app here. Let's see if we can drop in Svelte components into this default Blade Vue. So if we go into the source folder and check out the Svelte preset, if you scroll down, you'll see the dependencies we need to install on the front end. So we have Svelte, Laravel Mix Svelte, which is a plugin for Mix, and Svelte Loader, so Webpack can process Svelte components. So let's go ahead and install these manually. OK, our dev dependencies.

So let's go ahead and install these manually. OK, our dev dependencies. So let's say npm install -d. We need Svelte. We need Laravel Mix Svelte. And for the Svelte Loader, I found that the latest version did not work, so I'm just going to force it to the version they have here. So it's 2.13.4. So Svelte Loader at 2.13.4. OK, that is done.

So let's make use of this. We'll just grab the script section here. And this goes within a components folder within resources/js, and we'll make it in here. So new file, components/app.svelte. And it's based in that script. So it's making use of the onMount hook. And for the markup, let's just add something here. So let's say, I am a Svelte component. OK, let's save that. What else do we have here?

OK, let's save that. What else do we have here? Go back here. We have our app.js. So this is where Laravel scaffolds out all the JavaScript. And by default, all it's doing is requiring this other file here. But we have to add this other stuff to scaffold out Svelte. So let's add all of this. Let's go into our app.js.

Let's go into our app.js. app.js. OK. Let's paste that in here. So it's importing the component we made. It's creating a new instance of that component and attaching it to the window here. So let's save that. And if you take a look at the last file here, you'll see that it's just making use of the mix plugin and calling .svelte here. So let's make sure to require that in and call .svelte in our webpack.mix.js.

mix plugin and calling .svelte here. So let's make sure to require that in and call .svelte in our webpack.mix.js. webpack.mix.js. Let's require that in. And let's call .svelte here. .svelte. OK. So let's save that. Let's go back to the main documentation page here. And that should be set up now.

Let's go back to the main documentation page here. And that should be set up now. There should be usage instructions down here somewhere. So we just have to make sure to include the compiled JavaScript in our head. So let's do that within the welcome.blade.php. Let's just put it right here. OK. And then we can include our app component here. So let's grab this.

Save that. Let's go back there. Here I am. And let's take a look at this in the browser. And we are getting this error because I forgot to compile our assets. So we can say npm run dev. OK. Let's refresh this. And there's where the component is supposed to go. So let's replace that with our App component.

And there's where the component is supposed to go. So let's replace that with our app component. So let's say app. Let's save that and see if this works. So back here, let's refresh. And you can see it's not showing there, but it actually shows down here. And if we open up DevTools, we should see the onMounted hook being called. There it is. So if you do it this way, it's kind of assuming that the Svelte component is the root component and takes over your entire application.

So if you do it this way, it's kind of assuming that the Svelte component is the root component and takes over your entire application. Now you might want to do it this way, but usually you still want to make use of Blade and just drop in components wherever you need them. So in this case, we do want it to render up here and not have that one component take over the entire application. So if you go back to the documentation, there's actually instructions for that. It's for registering custom Svelte components. So we just have to make some changes within our app.js. So we can follow these steps here.

So we just have to make some changes within our app.js. So we can follow these steps here. It's saying make a new component, myTestComponent. So let's do that. So within our app.svelte, let's make a new folder or a new file, myTestComponent.svelte. And we'll just put something in here, mySvelteTestComponent. Okay, what's next? Next is to modify the webpack.mix file and say we want custom elements and tag null. So let's do that. Go back to our webpack.mix.

So let's do that. Go back to our webpack.mix.js. Let's add these options as an object and tag null. Okay, save that. What's next? It says import the component to your app.js. So let's import this new component we made. And we can say we want to use this tag for this component. So let's go ahead and do that. Import it.

So let's go ahead and do that. Import it. So back to our app.js. Go ahead and import that component. And let's make use of it using customElements.define. Okay, let's paste that in. The next step is to remove everything else. And it's also adding a tag for the App component. So let's grab this and remove everything else. So let's put this above.

So let's grab this and remove everything else. So let's put this above. Let's comment all of this stuff out. Let's save that. What's next? Now we can just drop in the components in our Blade view. So we have myApp and myTestComponent. So let's try that out. Let's grab these two components. Let's put them in our welcome.blade.php.

Let's grab these two components. Let's put them in our welcome.blade.php. And let's see if they actually go where we want it to go and not just append to the end of the document. So we'll put one here. And we'll put myTestComponent underneath this div here. So after this, it should be down here somewhere. Let's add that myTestComponent. And let's see if it actually drops the components where we want them. So let's save that.

And let's see if it actually drops the components where we want them. So let's save that. Let's compile everything again. Okay, go back here. Let's refresh our app. And you can see the components are rendering wherever we define them. And if you need to pass in data from your Laravel backend, you can pass it in as props to your Svelte components. So for example, for myTestComponent, if we were to pass in a prop here, let's say title equals mySvelteTitle, we can save that.

So for example, for myTestComponent, if we were to pass in a prop here, let's say title equals mySvelteTitle, we can save that. Now within that component, we can accept that. So myTestComponent, let's add a script tag here. Let's say export let title, and we can display it in the template. So let me just grab this, paste that in, and let's add a section for the title. And just output it here. Okay. Save that. Again, we have to compile.

Save that. Again, we have to compile. You can run a watch or two if you like. And now hopefully the prop shows, and it does, cool. So another option to use Svelte and Laravel together is to make use of Inertia. If you're not familiar with Inertia, it basically replaces all of your Blade views with your front-end framework of choice. So in this case, it replaces all of our Blade views with Svelte components. So there are installation instructions for Svelte on the Inertia documentation, but there's also a demo app, which you can find here.

And you can see the demo app running here. So we have different models like Organization and Contact, and you can perform crowd actions on them. And you can also do things like filtering, and it updates as you type. So if you take a look at the folder structure here, let's go to that project, which I have behind here. In the resources/js folder, you can see all of our Svelte components separated here. So we have pages and folders for all of our models. So for example, if we wanted to update our Index.svelte, so that would be this dashboard page here, we have this corresponding page Svelte component, which we can change here.

Let's refresh this page. And you can see the update there. And if you want to learn more about Inertia, make sure to check out the series we have here on Lerikas with Inertia and Vue.js. And the third option to use Lerivel and Svelte together is to have them as separate projects. So you would have separate repos, Svelte or SvelteKit as the client, and Lerivel will be your API server. So you would communicate between them by calling the Lerivel API endpoints from the front end. So for example, in the SvelteKit example I have shown here, for the API endpoints, we would call our own Lerivel API backend.

So for example, in the SvelteKit example I have shown here, for the API endpoints, we would call our own Laravel API backend. You can also utilize tools like Laravel Sanctum for authentication between the two projects. So yeah, just like Vue and React, those are the three most common ways of using Laravel and Svelte together. You can either drop them in as Svelte components, you can make use of Inertia, or you can have them as separate projects with Svelte as the front end and your Laravel API as a backend. So this brings us to the end of the series. Now Svelte might not be as popular as Vue or React, but it's pretty much on par in terms of the most common features.