nickpoulos / laravel-svelte-direct

Use your Svelte components seamlessly in Laravel Blade Templates
MIT License
20 stars 0 forks source link

Autoload doesnt work for me #5

Open martincodes-de opened 2 years ago

martincodes-de commented 2 years ago

Hey, i want to use this nice package, but the autoload doesnt work. It only works if i include the script tags manually. How can we fix this? My files:

const mix = require('laravel-mix');
require("./vendor/nickpoulos/laravel-svelte-direct/src/js/mix");

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

mix.svelteDirect(
    "resources/js/svelte",
    "public/js"
);
<!-- svelte-ignore missing-custom-element-compile-options -->
<svelte:options tag="hello-world" />

<h1>Hello Peter</h1>
<!doctype html>
<html>
<head>
    <title>My Example App</title>
</head>
<body>
<div class="container">

    <!-- example Svelte components here -->
    <hello-world></hello-world>
    <!-- end components -->

</div>

<script type="text/javascript">
    // tie your components together using vanilla js or something ike alpine
</script>

<!-- START Svelte Direct Component JavaScript -->
@stack('sveltedirect')
<!-- END Svelte Direct Component JavaScript -->
</body>
</html>

This blade file works (because i require the file from public/js/hello-world.js manually:

<!doctype html>
<html>
<head>
    <title>My Example App</title>
    <script src="{{ asset("js/hello-world.js") }}"></script>
</head>
<body>
<div class="container">

    <!-- example Svelte components here -->
    <hello-world></hello-world>
    <!-- end components -->

</div>

<script type="text/javascript">
    // tie your components together using vanilla js or something ike alpine
</script>

<!-- START Svelte Direct Component JavaScript -->
@stack('sveltedirect')
<!-- END Svelte Direct Component JavaScript -->
</body>
</html>