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
After installation complete move to project directory.
$ cd laravelt
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
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();
After this install the following dependencies.
$ npm install --save jquery popper.js bootstrap svelte
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>
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;
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>
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;
// app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
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
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.
Top comments (6)
$ 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???
i thinks is because many Bootstrap components require jQuery,,
here more getbootstrap.com/docs/4.4/getting-...
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 ?
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.
The JavaScript code inside the
js/app.js
file will automatically mount theApp
component in the<body>
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"