Laravel With Svelte Pug
Read Me
Run below commands on your terminal first to install node-modules repositories and other laravel dependencies:
npm install
composer install
To use Svelte-Loader always run on your first test and everytime you make changes with our Svelte Files:
npm run dev
Then run
php artisan serve
To add/create svelte components files go to /resource/js/components or you can also add more folder under /resources/js directory for your svelte resources.
Features of Svelte-Preprocess
Template tag support
Add vue-like support for defining your markup between a tag. The tagname can be customized to something like markup for example. See #options.
Note: only for auto preprocessing
< template >
< div > Hey < /div >
< /template >
< /code >
< style >
< script >< /script >
External files support
< template src="./template.html" >< /template >< script src="./script.js" >< /script >
< style src="./style.css" >< /style >
Global style support Add a global attribute to your style tag and instead of scoping the css, all of its content will be interpreted as global style.
Note1: needs postcss to be installed Note2: if you're using it as a standalone processor, it works best if added to the end of the processors array.
To use PUG preprocessors for your HTML inside *.svelte file follow:
div Posts +each('posts as post') a(href="{post.url}") {post.title}To use SASS inside your *.svelte file use:
Inside laravel.mix you can see this configuration
With svelte-loader ... module: { rules: [ ... { test: /.(html|svelte)$/, exclude: /node_modules/, use: { loader: 'svelte-loader', options: { preprocess: require('svelte-preprocess')({ /* options */ }) }, }, }, ... ] } ...
Preprocessing modes
svelte-preprocess can be used in two ways: auto preprocessing and with stand-alone processors.
Limitations
pug Template blocks Some of Svelte's template syntax is invalid in pug. svelte-preprocess provides some pug mixins to represent svelte's {#...}{/...} blocks: +if(), +else(), +elseif(), +each(), +await(), +then(), +catch(), +debug().
ul +if('posts && posts.length > 1') +each('posts as post') li a(rel="prefetch" href="blog/{post.slug}") {post.title} +else() span No posts :c
Element attributes Pug encodes everything inside an element attribute to html entities, so attr="{foo && bar}" becomes attr="foo && bar". To prevent this from happening, instead of using the = operator use != which won't encode your attribute value:
button(disabled!="{foo && bar}")
Disclamer: Svelte-Preprocess info are from https://github.com/kaisermann/svelte-preprocess You can visit that github repo for more information and if you want to add more preprocess script-support
Top categories
Want a Svelte site built?
Hire a Svelte developer