DoubleD Blog

Multilingual: Easy Laravel localization with Svelte

Skyslycer — Fri, 28 Feb 2025 07:00:32 GMT

Once your application reaches international communities localization is a thing to seriously consider. It can vastly improve the accessibility of your site and increase traffic at the same time by making it possible to use by more people!

As there are always multiple ways to achieve the same thing, in this case localization, I have compiled the instruction set to use localization with Laravel (and Svelte) without much work!

This post is largely based on the first Laravel + Svelte blog post and builds upon it. I recommend checking it out! You can also see the entire code of this guide in my GitHub repository. With that out of the way, let's get started!

Publishing missing language files

By default, Laravel doesn't expose any languages files, which prevents us from changing any of them. Luckily, there is a neat Artisan command to publish the needed files.

php artisan lang:publish

CLI

After running the command, you should be able to see a new directory: lang. It contains the following files:

lang/

These are all default Laravel language files for back end validation and similar.

Installing Laravel Translator

To get these files usable in our front end, we have to use a third party package called laravel-translator which lets us access our localized strings within Svelte. To install it, run the following command:

npm install -D laravel-translator

CLI

Next, we have to update our vite.config.js by adding the laravelTranslator import and adding that to the plugin list. If you started off from the first Laravel + Svelte blog post, you are able to copy and paste the entire following code. Alternatively add the two changed lines to your config.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from "@sveltejs/vite-plugin-svelte";
import laravelTranslator from "laravel-translator/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        svelte({}),
        laravelTranslator(),
    ],
});

vite.config.js

Finally, we need to adjust our app.blade.php in the resources/views directory to properly contain the desired language. We need to replace the opening html tag with the following: . To also add a fallback locale, which is really useful for incomplete community translations, add the following:

Your Blade view should then look something like this:





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


@inertia

resources/views/app.blade.php

Adding translations

Let's add some translations! You can use two different file types to add translations: JSON and the regular PHP files. Personally, I prefer the JSON approach, but choosing a file type is your decision.

First, create an en.json file in the lang directory which will contain all our custom translations for the English language. We can now populate it with the different types of localization:

{
    "projectName": "Laravel + Svelte",
    "greeting": "Hello, World!",
    "greetingWithName": "Hello, :name!",
    "greetingWithAge": "Hi :name, you are :count year old.|Hi :name, you are :count years old.",
    "userCount": "{0}There are no users online!|{1}There is one user online!|[2,Inf]There are :count users online!"
}

lang/en.json

This contains simple translation, parameterized translations (:name) and pluralized translations covering most types of translations. Parameters are defined with a leading colon like this: :param.

If you just want to differentiate between one (1) and many (2+) in your translation, you can simply use a pipe symbol (|) to split the string. The first part will be used when there is only one of the :count, and the second part when there are more than one.

Additionally, you have the possibility to define translations for exact amounts with {amount} as seen in the userCount translation. Check out the official Laravel documentation to see all possible pluralization techniques.

Usage

If you are following the first Laravel + Svelte blog post, you should be familiar with the Index.svelte in the resources/js/Pages/Home directory. We will use that file to test our new translations.

Firstly, we need to import the various translation functions. Realistically, you will only need two, but it's good to have seen all of them in use.

Here is an example Index.svelte with all translation functions in use:




    
        {__('projectName')}
        {trans('greeting')}
        {t('greetingWithName', {name})}
        {trans_choice('greetingWithAge', age, {name})}
        {trans_choice('userCount', 0)}
        {trans_choice('userCount', 1)}
        {trans_choice('userCount', 2)}

resources/js/Pages/Home/Index.svelte

The name and age properties are still left over from the first blog post, and we will insert them into translated strings.

The functions __, t and trans do exactly the same. The first argument is a translation key we defined in the en.json. If required, the second parameter contains all variables to replace in the translations. If your variable and the parameter in the translation are called the same, you can just pass the variable. Otherwise define it as follows: {name: otherName}.

The pluralization functions behave a little differently. The second parameter is the number which should be localized. That number is then available as the :count parameter in the localization file. The third parameter is the same as the second parameter from the regular function and contains the variables to pass to the localized string.

With all that figured out, we can try to see it in action by running composer run dev!

Working example

Moreover, changing the age variable passed down by the back end will have an immediate result in the web page:

Example for working pluralization

Adding another language

Last but not least, we have to add a different language. We are doing localization after all. For this example, I will add German translations. To get started, we have to create a new file in the lang directory, in my case called de.json. Let's fill it with translated strings!

{
    "projectName": "Laravel und Svelte",
    "greeting": "Hallo, Welt!",
    "greetingWithName": "Hallo, :name!",
    "greetingWithAge": "Hi :name, du bist :count Jahr alt.|Hi :name, du bist :count Jahre alt.",
    "userCount": "{0}Es sind keine Benutzer online!|{1}Es ist ein Benutzer online!|[2,Inf]Es sind :count Benutzer online!"
}

lang/de.json

Changing the default locale in the .env file to de will change the language on the web page:

APP_LOCALE=de

.env

And indeed, the changes show, and the pluralization works as expected!

Furthermore, since we added the fallback locale, any localization keys that haven't been translated in German, will be shown in the English translation!

And that's all! You have successfully added localization to your Laravel and Svelte website! If this guide has intrigued you, I recommend take a look at adding Shadcn-Svelte to that project which provides a great amount of useful and beautiful UI components.

Lastly, I want to point out that all code used here is publicly available on the localization branch of the laravel-svelte GitHub repository!

If you liked this guide and want to see more of these in the future and be notified when a new one releases, consider signing up for our free newsletter! Thank you.

Spice up your UI with Shadcn-Svelte and Laravel!

Skyslycer — Wed, 26 Feb 2025 23:15:00 GMT

The key to fast and efficient development while upholding a great user interface and experience is not only solved by a proper JavaScript framework like Svelte, but also ideally requires a UI element library which contains many different pre-made and beautiful components. Libraries like Bootstrap were very popular and made websites, which used them, easily identifiable.

With Shadcn and similar a new era of UI libraries began: they don't just provide you with a massive library with every component you can dream of in it, but they also give you the entire source code for each component which makes it possible to customize them.

The last blog post guided you through the installation process of Laravel and Svelte. The code of that guide can be found on GitHub on the master branch: https://github.com/DoubleD-Software/laravel-svelte

This guide will explain the installation process of Shadcn. While it is largely based on the Vite guide on Shadcn-Svelte's own website, adding it to Laravel contains a few quirks you need to consider.

As always, the code of this guide will be made available on the shadcn branch of the GitHub repository.

Let's get into it!

Configuration

JS and TS configs

First we need to add path aliases to the respective configuration files to simplify the import process of our components.

If you are using JavaScript as the example does, please create a jsconfig.json in the root of the directory.

{
    "compilerOptions": {
        "paths": {
            "$lib/*": ["./resources/js/lib/*"],
            "$lib": ["./resources/js/lib"]
        }
    }
}

jsconfig.json

Alternatively, if you are using TypeScript, locate your tsconfig.json and tsconfig.app.json and add the required paths.

{
 "files": [],
 "references": [
  { "path": "./tsconfig.app.json" },
  { "path": "./tsconfig.node.json" }
 ],
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "$lib": ["./resources/js/lib"],
   "$lib/*": ["./resources/js/lib/*"]
  }
 }
}

tsconfig.json

And the tsconfig.app.json:

{
 "compilerOptions": {
  // ...
  "baseUrl": ".",
  "paths": {
   "$lib": ["./resources/js/lib"],
   "$lib/*": ["./resources/js/lib/*"]
  }
 }
}

tsconfig.app.json

With the language configuration files taken care of, we need to add the path to the Vite config as well.

Vite config

Find the vite.config.js and if you are following the other guide, copy and paste the entire following codeblock overwriting the entire file.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from "@sveltejs/vite-plugin-svelte";
import path from "path";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        svelte({}),
    ],
    resolve: {
        alias: {
            $lib: path.resolve("./resources/js/lib"),
        },
    },
});

vite.config.js

If you are adding this to your own Vite config, do not forget to add the path import!

Installation

Now we are ready to install Shadcn! Or at least initialize the required files, since Shadcn doesn't really "install" itself in your code base. In order to do that run the following command. When using pnpm you are able to use pnpm dlx instead of npx.

npx shadcn-svelte@next init

CLI

In the selection prompt chose everything according to your project settings. If you are using JS, select JS, if not, select TS. Simple as that.

If the Shadcn installer didn't recognize your app.css immediately, you can simply set it to the path resources/css/app.css.

Fixing TailwindCSS

To add its own styles, Shadcn overwrote your tailwind.config.js. The issue specifically lies in the overwritten content tag. It now doesn't contain the correct extensions anymore, which leads to TailwindCSS breaking entirely. So let's fix it!

Switch the content tag in your TCSS config back to the original value:

    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.svelte',
    ],

tailwind.config.js

Remember to only overwrite the content key! If you remove anything else it is very likely that Shadcn won't work!

With all that tedious configuration work done, we can finally start using Shadcn components with Svelte and Laravel!

Usage

Let's begin with the simplest component of them all: the button.

You can take a look at all different components on Shadcn-Svelte's website!

To add that component to your code base, you run the following command. You can again replace npx with pnpm dlx when using PNPM.

npx shadcn-svelte@next add button

CLI

After going through the prompts you should have your component at the ready! Let's add it to our Index.svelte which we have created in the previous guide!




    
        Laravel + Svelte
        Hello {name} ({age})

Home/Index.svelte

Here we can see our custom path $lib! Your IDE should automatically import the right file when trying to use the Button component. Make sure you aren't importing it from bits-ui though!

With that out of the way and a simple component added to our main page, we can start the development server.

composer run dev

CLI

You can configure which commands composer runs in your composer.json if you want to run PNPM instead of NPM!

After the development server spun up, you can open up your website and take a look and your new button!

Currently, it is not the best looking, but it's proof that it works! Your imagination should do the rest! Have fun with Shadcn!

If you encounter any issues or have questions regarding this or any other guides and blog posts, consider joining our DoubleD Software Discord server: https://discord.gg/2kGR3AdfZH

In case you want to check out the code for this guide, take a look at the shadcn branch of the repository!

Thanks for reading this blog post! Consider subscribing (free) to our newsletter to always receive a notification when we publish a new useful guide! Thank you!

Using Laravel with Svelte

Skyslycer — Mon, 09 Dec 2024 18:38:09 GMT

Laravel, an extensive PHP web application framework with many features already baked in from the beginning, is steadily increasing in popularity. Similarly, Svelte, yet another JS framework for the front end, is seeing more and more adoption.

Unfortunately, Laravel currently only provides default setups for other major frameworks: React and Vue. While this is unfortunate, the endless configuration options in the web space have given us the possibility to use Laravel with Svelte. The main contributor to this solution is InertiaJS, which not only provides React and Vue support to Laravel, but also supports Svelte.

After wanting to start out in the world of Laravel using my favorite JS framework Svelte, I was stumped to find out that other than a few sparsely documented wiki pages and outdated blog posts, there was no information on how to set up a project from the start.

This lead to me creating this blog post, which sums up, what I believe is all the step-by-step information you need to start out with your Laravel project using Svelte. It not only covers the basics of installing it, but also goes over other specific cases like passing data from Laravel to Svelte and using layouts where my research lead to me piecing this information together from multiple different sources and posts.

You can find the accompanying repository on my GitHub: https://github.com/DoubleD-Software/laravel-svelte

Let's get started!

Creating a new project & adding Svelte

Installing Laravel

If not already done, you should install Laravel and all tools required to run it according to the official installation instructions.

/bin/bash -c "$(curl -fsSL https://php.new/install/mac/8.3)"

MacOS installation script

# Run as administrator...
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://php.new/install/windows/8.3'))

Windows PowerShell installation script

/bin/bash -c "$(curl -fsSL https://php.new/install/linux/8.3)"

Linux installation script

If you already have PHP and Composer installed, you can use this command to install the Laravel installer:

composer global require laravel/installer

After you have installed Laravel, close your terminal and reopen it. You should now have access to the laravel command.

Creating a new project

We have to create a new Laravel project to work in. Move to your projects directory, or anywhere where you want your project to be created in. Then run this command, replacing laravel-svelte with the name of your project. Afterwards, move to the project directory.

laravel new laravel-svelte
cd laravel-svelte

You can just select the default option in all prompts. This means: no starter kit, Pest as the testing framework, SQLite as the database and "Yes, I want to run the default database migrations".

Installing InertiaJS on the server side

Installing InertiaJS

To support the latest version of Svelte, we currently have to install a development version of InertiaJS 2. Once this version has released, you can use that instead of the development version.

composer require inertiajs/inertia-laravel

Installing InertiaJS 2

Populating the `app.blade.php`

Now you can delete the welcome.blade.php in resources/views/ and create a new file in that same directory called app.blade.php, which you can populate with the following code. This will tell InertiaJS where it can insert its content.




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


@inertia

resources/views/app.blade.php

Installing the required middle ware

For InertiaJS to work properly on the server side, we have to add its middle ware. This is simply done using this command:

php artisan inertia:middleware

Additionally, you have to add the middle ware to the bootstrap/app.php file. If your project is still fresh, you can just copy and paste the following code:

withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )->withMiddleware(function (Middleware $middleware) {
        $middleware->web(append: [
            HandleInertiaRequests::class,
        ]);
    })->withExceptions()->create();

bootstrap/app.php (note the InertiaJS middle ware)

With all this done, we can now move on to the client side.

Installing Svelte and InertiaJS on the client side

Installing all required packages

For this to work, we need to install the following packages: Svelte, the Vite plugin for Svelte, InertiaJS's Svelte adapter and Vite 6 or higher. This should resolve without any dependency conflicts.

npm install svelte
npm install @sveltejs/vite-plugin-svelte
npm install @inertiajs/svelte
npm install vite@6.0.0

Installing the required packages

Populating the `app.js`

You can overwrite the current content of the resources/js/app.js file with the following content. It defines where InertiaJS will look for files to interpret.

import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte'
import '../css/app.css'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
  },
  setup({ el, App, props }) {
    mount(App, { target: el, props })
  },
})

resources/js/app.js

Furthermore, you can delete the resources/js/bootstrap.js file, this will have no repercussions.

Configuring Vite and TailwindCSS

Copy and paste the following into the vite.config.js file in the root of the project directory.

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({})
    ],
});

vite.config.js

Afterwards, overwrite the tailwindcss.config.js with the following content:

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.svelte',
    ],
    plugins: [],
};

tailwindcss.config.js

And with that, the installation part of this guide is done. Let's move on to the usage.

Using Svelte in Laravel

Basic page rendering

Creating a new Svelte file

For InertiaJS to be able to render your Svelte files, you first have to create a Pages (yes, capital P) directory in the resources/js/ folder. In there, you can create another folder called Home, where you then create the first Svelte file called Index.svelte. Usually, developers use the folders like Home to differentiate between different items in a REST API. In this case, this will just return a simple website with the following code:


    Laravel + Svelte

resources/js/Pages/Home/Index.svelte

Note how we can use TailwindCSS right out of the box!

Rendering the new Svelte file

Now you can render this page on the / route by replacing it with the following code in the routes/web.php:

routes/web.php

See how you only have to define the directory from the Pages folder and up. You also don't need to use the .svelte extension.

`Running the server`

For good measure, you can run both Composer and NPM install commands to be sure that all dependencies are up to date.

npm install
composer install

The following command will then run npm run dev and php artisan serve simultaneously. This will start the development server and is usually on http://localhost:8000, but check your console for your port.

composer run dev

This command will run the development server

Going to this page in your browser should yield the following result (500% zoomed):

Congratulations! You have successfully visited your first Laravel + Svelte site.

`Passing data`

Passing data to the front end in Laravel is very straight forward, but it isn't very clear what you have to do in the Svelte code base to use that data.

`Laravel side`

As previously mentioned, this is fairly simple. Simply modify the route routes/web.php as shows below, which will return two properties to the Svelte site.

Route::get('/', function () {
    return Inertia::render('Home/Index', [
        'name' => 'John Doe',
        'age' => 30,
    ]);
});

routes/web.php

`Svelte side`

To receive the data, you simply have to use the $props() function in Svelte as the following example shows:




    Laravel + Svelte
    Hello {name} ({age})

resources/js/Pages/Home/Index.svelte

With that defined in the script tag, you can use the data wherever you want in your Svelte file in the traditional fashion.

The website should now look like this (500% zoomed). Simple, isn't it?

`Using layouts`

Using layouts in Laravel with Svelte sadly isn't as intuitive as using them in SvelteKit. Nevertheless, we can still use a layout-like system.

`Creating a new layout`

To accommodate our new layout file, we have to create a new directory. It can named in any way, but for the sake of clarity you should call it Layouts. Create it alongside the Home directory in resources/js/Pages/. In that new layout directory, create a new Svelte file called App.svelte, although it can be named whatever you desire.

Populate this file with your layout. Here is an example that adds a green background:




    {@render children?.()}

resources/js/Pages/Layouts/App.svelte

`Using the new layout`

To use this new layout in your Index.svelte file, you have to first import the layout in a script tag and then wrap your content within the layout as the following example shows:




    
        Laravel + Svelte
        Hello {name} ({age})

Make sure your import is correct. The main page should look like this after the change (500% zoomed):

`Final words`

I hope this guide helped you in your Laravel + Svelte journey and that you now have a simple yet working website built entirely in Svelte and served by Laravel.

If you encounter any errors, check all the instructions, paths and code again. You might have missed something somewhere. If you think there is an error or something is missing, you can contact me on Discord: https://discord.gg/2kGR3AdfZH

Don't forget to check out the GitHub repository at https://github.com/DoubleD-Software/laravel-svelte and give it star!

Make sure to sign up (free) for the DoubleD newsletter to receive more of these useful guides and interesting experiences below! Thank you!

DoubleD Blog

Multilingual: Easy Laravel localization with Svelte

Publishing missing language files

Installing Laravel Translator

Adding translations

Sign up for the DoubleD Blog

Usage

{__('projectName')}

Adding another language

Spice up your UI with Shadcn-Svelte and Laravel!

Configuration

JS and TS configs

Vite config

Installation

Fixing TailwindCSS

Sign up for DoubleD Blog

Usage

Laravel + Svelte

Using Laravel with Svelte

Creating a new project & adding Svelte

Installing Laravel

Creating a new project

Installing InertiaJS on the server side

Installing InertiaJS

Populating the app.blade.php

Installing the required middle ware

Installing Svelte and InertiaJS on the client side

Installing all required packages

Populating the app.js

Configuring Vite and TailwindCSS

Sign up for the DoubleD Blog

Using Svelte in Laravel

Basic page rendering

Creating a new Svelte file

Laravel + Svelte

Rendering the new Svelte file

Running the server

Passing data

Laravel side

Svelte side

Laravel + Svelte

Using layouts

Creating a new layout

Using the new layout

Laravel + Svelte

Final words

Populating the `app.blade.php`

Populating the `app.js`

`Running the server`

`Passing data`

`Laravel side`

`Svelte side`

`Using layouts`

`Creating a new layout`

`Using the new layout`

`Final words`