In the dynamic realm of web development, Laravel stands tall as a PHP framework renowned for its elegance and functionality. However, with the continuous evolution of frontend technologies, developers seek seamless integration of cutting-edge tools into their Laravel projects. Enter Svelte and Vite.js – revolutionizing front-end development with unparalleled performance and speed. In this article, we explore how to integrate Svelte and Vite.js within Laravel applications, unlocking new avenues for efficiency and innovation in modern web development.

So, let’s get started.

Setting up Laravel

Begin by initiating a new Laravel project. Utilize Composer, the PHP dependency manager, to create a fresh Laravel installation. For instance, you can name your project ‘svelte-laravel‘ using the following command:

composer create-project laravel/laravel svelte-laravel

This command will fetch the latest version of Laravel and set up the initial project structure for you to work with.

Installing Dependencies

With Laravel set up, the next step involves installing the necessary JavaScript dependencies. Utilize npm (Node Package Manager) to install these dependencies. Run the following command in your project directory:

npm install

This command will install all the required JavaScript packages and libraries specified in the project’s ‘package.json‘ file, ensuring that your front-end development environment is ready to go.

Installing Vite Plugin for Svelte

To leverage the benefits of Vite.js alongside Svelte in your Laravel project, you’ll need to install the ‘sveltejs/vite-plugin-svelte‘ package. Execute the following command:

npm install @sveltejs/vite-plugin-svelte

This command will download and install the Vite plugin specifically designed for integrating Svelte components into Vite.js. This plugin streamlines the development process by facilitating seamless interaction between Svelte and Vite.js within your Laravel application.

Configuring Vite

To configure Vite.js in the Laravel project, we need to make a few adjustments to the ‘vite.config.js’ file. This file controls the behavior of Vite.js during the development and build processes. Here’s how you can modify it:

The final output looks like this:

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({

    plugins: [

        laravel({

            input: ['resources/css/app.css', 'resources/js/app.js'],

            refresh: true,

        }),

        svelte(),

    ],

});

Integrating with Blade Template

Now integrate Vite.js into a Blade template by declaring the script tag with the ‘@vite‘ directive.

<body class="antialiased">

        <div id="app"></div>

        @vite('resources/js/app.js')

    </body>

Writing JavaScript Entry Point

Set up the JavaScript entry point (‘app.js‘) where you import the Bootstrap file and initialize the Svelte app.

import './bootstrap';

import App from "./components/App.svelte";

const app = new App({

    target: document.getElementById("app"),

});

export default app;

Creating Svelte Components

Now create Svelte components like ‘App.svelte’, ‘Logo.svelte’, and ‘Card.svelte’ to build the frontend UI.

<script>

    import Logo from "./Logo.svelte";

    import Card from "./Card.svelte";

    let footer = {

        text: "Developed by Raisul Hridoy &copy; 2024-2025",

    };

   </script>

<div

    class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white"

>

    <div class="max-w-7xl mx-auto p-6 lg:p-8">

        <Logo />

        <div class="mt-16">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">

                {#each cards as card}

                    <Card {card} />

                {/each}

            </div>

        </div>

        <div

            class="flex justify-center mt-16 px-0 sm:items-center sm:justify-between"

        >

            <div class="text-center text-sm sm:text-left">&nbsp;</div>

            <div

                class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0"

            >

                {@html footer.text}

            </div>

        </div>

    </div>

</div>

Overall, this setup allows for a smooth integration of Svelte and Vite.js into Laravel projects, providing developers with a powerful combination of backend and frontend technologies for efficient and innovative web development.

This page was last edited on 28 July 2024, at 5:42 pm