DEV Community

Cover image for Using Svelte.js with Laravel Part 2: Make Svelte scaffold in Laravel 6
Shah Nawaz Shuvo
Shah Nawaz Shuvo

Posted on • Edited on

10 3

Using Svelte.js with Laravel Part 2: Make Svelte scaffold in Laravel 6

Svelte is a radical new approach to building user interfaces. In my last post I used a package called laravel-svelte-preset to get Svelte scaffolding in Laravel 5.8. But this package is not yet compatible with new Laravel 6. In this post we will manually make a Svelte scaffold in Laravel 6. For this we will start fresh.

First install a fresh Laravel 6 project.

$ composer create-project --prefer-dist laravel/laravel laravelt
Enter fullscreen mode Exit fullscreen mode

After installation complete move to project directory.

$ cd laravelt
Enter fullscreen mode Exit fullscreen mode

Now we have to install an npm package. This package is also from WeWowWeb. The package is called laravel-mix-svelte. This will simply add to Laravel Mix the capability to compile Svelte code.

$ npm install wewowweb/laravel-mix-svelte
Enter fullscreen mode Exit fullscreen mode

After installation is finished open your webpack.mix.js file and make it look like the following.

// webpack.mix.js
const mix = require('laravel-mix');

require('laravel-mix-svelte');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .svelte();
Enter fullscreen mode Exit fullscreen mode

After this install the following dependencies.

$ npm install --save jquery popper.js bootstrap svelte
Enter fullscreen mode Exit fullscreen mode

Now we have to make some files manually and code a little bit by ourselves. Inside your resources/js directory make a directory named components and inside components make a file named App.svelte. Your App.svelte should look like this.

// App.svelte
<script>
    import { onMount } from "svelte";

    onMount(() => {
      console.log("the component has mounted");
    });
</script>

<main>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Example Component
                    </div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
Enter fullscreen mode Exit fullscreen mode

Now edit your resources/js/app.js.

// app.js
require('./bootstrap');

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

const app = new App({
  target: document.body
});

window.app = app;

export default app;
Enter fullscreen mode Exit fullscreen mode

Now for the resources/views/welcome.blade.php file. It should look like the following.

// welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    </head>
    <body>

        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Finally we have to add bootstrap to the mix. Make two .scss files in the resources/sass directory named _variables.scss and app.scss.

// _variables.scss
// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
Enter fullscreen mode Exit fullscreen mode
// app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
Enter fullscreen mode Exit fullscreen mode

We are almost done here. We literally made a Svelte.js scaffold in our Laravel 6 application. Now we can transpile Svelte by webpack and get our Svelte component in Laravel application.

$ npm run dev && php artisan serve
Enter fullscreen mode Exit fullscreen mode

Now hopefully we will see a page containing a sample Svelte component when we browse our local server. I hope you guys will try it out and please let me know how it goes. I'm just experimenting with this a little. Hope you all like it. Cheers.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (6)

Collapse
 
collectasaurus profile image
Collectasaurus

$ npm install --save jquery pooper.js bootstrap svelte

I would suggest popper over pooper but... Also why would you want to use svelte and then install jquery???

Collapse
 
dansvel profile image
dan

i thinks is because many Bootstrap components require jQuery,,
here more getbootstrap.com/docs/4.4/getting-...

Collapse
 
shakhawatfci profile image
shakhawat hossain sabbir

but i want master page as in laravel .. i want to render components by calling it here in page as like vue laravel is it possible ?

Collapse
 
pkumaravk profile image
pkumaravk

Inserting the script tag in the

element inserts the component in the code ?

i thought to insert the component we need to add in the body tag.

Collapse
 
shuv1824 profile image
Shah Nawaz Shuvo

The JavaScript code inside the js/app.js file will automatically mount the App component in the <body>

Collapse
 
amjad_niazi profile image
Amjad Iqbal Khan

Great, please also make a tutorial how to use laravel6 Authentication with svelte and how to get rid of vue like "php artisan ui vue --auth"

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay