Looking to integrate Svelte components into your Laravel app without the need for Inertia.js or Laravel Mix? This guide will show you a straightforward approach to load and initialize Svelte components in a Laravel multi-page application (MPA) using Blade templates.

Intro

Most tutorials on using Svelte with Laravel are geared toward creating SPAs (Single Page Applications) using Inertia.js, where Laravel acts primarily as the backend. However, if Blade templates meet your frontend needs and you only want to add feature-rich Svelte components in specific parts of your app, there’s a simpler way to do this—without Inertia.js or Laravel Mix.

In this guide, we’ll manually integrate Svelte components into Laravel using Rollup as the bundler, which compiles all Svelte components into a single CSS and JS file. These can then be included in your Blade templates where needed.

Why Not Use Inertia.js or Laravel Mix?

While Inertia.js is great for SPAs, it’s overkill if you’re happy with Laravel’s Blade templates and just want to add a few custom components. As for Laravel Mix, while it’s useful, some developers find it challenging to configure when integrating Svelte, leading to unnecessary complexity.

The method described here keeps things simple and efficient.

Steps to Use Svelte in Laravel Blade Templates

1. Compile Svelte components with Rollup

  • create an empty node.js project
mkdir custom-svelte-compiler && cd custom-svelte-compiler
npm init -y
  • install dependencies
npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-import-css rollup-plugin-svelte rollup-plugin-terser svelte --save-dev
  • you should have package.json similar to this, add "build": "rollup -c" in scripts
{
  "name": "custom-svelte-compiler",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.79.1",
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "rollup-plugin-import-css": "^3.3.1",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-svelte": "^7.1.6",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^4.2.0"
  }
}
  • create this structure in your folder
custom-svelte-compiler/
├── node_modules/
├── public/bundle/
│          ├── bundle.js
│          └── bundle.css
├── src/
│   ├── components/
│   │   ├── CustomComponent.svelte
│   │   └── SvelteComponent.svelte
│   └── main.js
│   .... all svelte js and other dependencies of Svelte components
└── rollup.config.js
  • put all your Svelte components in /src/components folder
  • create main.js - the main input file export all components you want to use in Laravel
export { default as SvelteComponent } from './components/SvelteComponent.svelte';
export { default as CustomComponent } from './components/CustomComponent.svelte';
  • create file rollup.config.js in the root folder
import svelte from "rollup-plugin-svelte";
import resolve from '@rollup/plugin-node-resolve';
import css from "rollup-plugin-import-css";
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/main.js',
  output: {
     format: 'iife',
     dir: './public/bundle/',
     entryFileNames: 'bundle.js',
     assetFileNames: 'bundle.css',
	 name: 'app', // all components classes go to app object
	},
  plugins: [
    svelte({
      include: 'src/**/*.svelte',
      emitCss: false,
    }),
    resolve({ browser: true }),
    css(),
    commonjs(),
  ],
}
  • compile npm run build or rollup -c
  • this should generate 2 files in public/bundle folder
  • if you have any errors check on Google

2 Use the components inside Laravel blade

  • copy bundled css and js files to your Laravel public assets folder
  • include css and js files in your blade layout template
<script src="{{ asset('bundle/bundle.js') }}"></script>
  • create div element in the template where you want the Svelte component
<div id="svelte-component"></div>
  • add script tag below this element and initialize the Svelte class
  <script>
   new app.SvelteComponent({
       target: document.getElementById('svelte-component')
   });
 </script>
  • we can also add props data to Svelte class, for example, json data from Laravel
  <script>
   window.filters = @json($array);
   new app.SvelteComponent({
       target: document.getElementById('svelte-component'),
       props: {
           filters: window.filters
       }
   });
 </script>

Conclusion

By following this approach, you can seamlessly integrate Svelte components into a Laravel project without the need for Inertia.js or Laravel Mix. Rollup handles the bundling of your Svelte components into a single JavaScript and CSS file, making it easy to include and use them within Blade templates.

This method is ideal for developers who are comfortable with Laravel’s Blade templating system but want to add the power of Svelte for more interactive and dynamic components.