Integrating Svelte with Hugo

I am working with this repository.
Running the code with Docker is probably the easiest way (see README.md).

I like using Svelte to handle the JavaScript required for HTML forms.
I think it would be really cool to integrate this into Hugo so that you can have “.svelte” files in your content directory.

Currently, I write the HTML/CSS/JS for the form in a “.svelte” file. Then, I build the hugo site, and copy the relevant index.html page into my Svelte project. Then I build the Svelte project and copy the resulting build files back to the Hugo public directory.

Would it be possible for me to create a Hugo module that would allow us to use “.svelte” files in our content directory? I’m thinking that we can put a “.svelte” file next to a regular content file, and then specify what ID the svelte component will be included into.

Example:
content/contact.html contains an empty div with id=“my-svelte”.
content/my-svelte.svelte contains the Svelte code for the “my-svelte” component to be placed inside that div.

How would I go about integrating this using a Hugo module?

1 Like

Not tested. And a bit old.

Thanks for the post.