Form actions on +layout.server.js?

[madeleineostoja]

From what I can tell it's not possible to export actions from +layout.server.js to be used in +layout.svelte. Is this intentional, or a technical limitation?

The use case I'm trying to address: global slideovers for things like newsletter subscription and enquiry forms, which are all part of our global layout. The easy workaround is to chuck these in something like /api/+page.server.js and make the action /api?/[action] but that feels like a hack

[madeleineostoja]

Just realised this is very likely because how would you call any action from a layout on anything but +layout.svelte, it'd need yet another naming convention. Might be worth documenting for dense folks like me?

[dummdidumm]

It's because it couldn't fall back to native behavior - a layout is not a page you can reload. The way to solve this is to have a route which deals with the newsletter, and call actions from there in your layout. That way with JS enabled you stay on the current page, but if for some reason JS isn't enabled it redirects to the newsletter signup page instead.

[madeleineostoja]

Yep this is what I landed on, makes sense!

[madeleineostoja]

@theetherGit what you’re describing is a standard API endpoint, you can do that but you lose the progressive enhancement aspect

[theetherGit]

ok thank you so much

[dan-cooke]

@dummdidumm But what if we don't want to render anything on that page? ie. if we have an action that is just for saving a users cookie preferences- there is no point having a physical page for that

[danilomozer]

I agree with @dan-cooke.In my opinion, creating a whole new route (folder and +file.server.ts) is intuitive in that case.

I'm trying to create a search input placed on my navbar, which is in my +layout.svelte file, so it can be rendered on all pages. So tried to create and form action to deal with search inputs and got the error:

Invalid export 'actions' (valid exports are prerender, ssr, csr, trailingSlash, config, load, or anything with a '_' prefix)

If I got it right, I'll need to create a new route (src/search) and a new server file (src/search/+page.server.ts) to add my form actions and handle my search feature.

PS: the official documentation does not mention that form actions are not available for layout files, I only figured it out after reading this discussion.

[beerinho]

I'm currently running into an issue with this. The above answer helped somewhat, except now I can't get the validations from the page.

I have a newsletter-signup route that has a default action that is getting called by a form in my global footer. I can see that it's getting called and working on the server, but I can't figure out how to get the validations back from the action.

I was able to get it working on a single route by using $page.form but that isn't working if I'm not on the route with the exported action.

Is there a way to get the form from a specific page? Or a better way to tackle this?

[beerinho]

I figured it out, I needed to use the use:enhance callback to get the return values much closer to the component rather than try to go through the $page

[theetherGit]

I will suggest to use super forms it's pretty good

[shivrsdev]

Now you should be able to just put the load function in +layout.server.ts and the actions in +page.server.ts, that works fine for me!