Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

functions/ directory #35

Atinux opened this issue Sep 3, 2019 · 7 comments

functions/ directory #35

Atinux opened this issue Sep 3, 2019 · 7 comments


Copy link

Atinux commented Sep 3, 2019

Update: Implementation specs:


Introducing a functions/ directory could have a powerful effect for users that want to add server functions but without having to go through the serverMiddleware.


export default async function ({ req, res, data, nuxt }) {
  // data is parsed from req.body
  // nuxt is actual Nuxt instance
  return { title: 'Hello world!' }

On the app side, it will expose a $functions object with $functions.<functionName> method (asynchronous).


  <h1>{{ title }}</h1>

export default {
  async asyncData ({ $functions }) {
    const { title } = await $functions.helloWorld()

    return { title }

How does it work?

@nuxt/functions will:

  1. Create a serverMiddleware on /_nuxt/functions/:functionName
  2. Read and watch ${srcDir}/functions/**/*.js|ts files with chokidar and add to nuxt.$functions (kind of inject but for nuxt instance + ssrContext)
  3. Inject $functions in the Nuxt app with this.addPlugin (server = call ssrContext.$functions method, client, call in POST /_nuxt/function/${functionName} with fetch)

With this system, we could leverage HMR for functions/ in dev mode. Also, we can imagine a way to export this functions as serverless (for client-side call) when running nuxt build with target: 'serverless' or static``, see target pr. We could imagine some community modules to support transforming theses functions to Now V2, Netlify Functions, AWS Lambda, etc.

I believe this could be an official Nuxt module without having to be installed right away, combined with lmify inside Nuxt, it could be installed automatically if a functions/ directory is detected 🔥

In this area, we can leverage a @nuxt/sse module to expose nuxt.$sse in functions and this.$sse in the Vue app.

PS: 0 breaking change 😇
PS2: We could also add req.nuxt for serverMiddleware to get access to nuxt.$sse

Copy link

Looks awesome. Can you elaborate on the improvements compared to ZEITs /api/myFunc.js except that it works on more providers?

Copy link

cosbgn commented Apr 4, 2020

@codeofsumit This would be great and much better than Zeit because (if I understood everything correctly) it will be:

  • Able to run anywhere you have node (with nuxt start) and support directly Zeit, lambda, Netlify, etc via modules with nuxt generate, which is great because it creates zero vendor lock in.
  • Able to run offline now dev (zeit) can't run offline and it's a big problem.
  • Directly integrated into nuxt, with Zeit you need to call your functions each time with axios, parse the response etc, here you could simply do const foo = $ - That simple.

The main advantage for me is to have zero vendor lock in. I currently use Zeit and I like it, but I don't like that fact that I can't switch so easily due to their own "helper functions" etc. I would love to have something directly built within Nuxt and know that I can deploy it easily pretty much anywhere. So far this has been the case for my frontend but with this it will be the case also for my backend.

Great work! I'm very excited about this!

Copy link

Is there any progress on this? Any repo or place I can help out on this?

Copy link
Member Author

Atinux commented Aug 4, 2020

The project is on standby until we have the POC of Nuxt 3 supporting serverless target by default. Otherwise the functions/ would only work for target: "server".

Copy link
Member Author

Atinux commented Jan 25, 2021

This will be implemented with Nitro (coming soon) and an api/ directory.

Copy link

Note that Cloudflare Pages scans the functions directory to populate the Cloudflare Workers integration.

Copy link

pi0 commented Jul 22, 2022

@wasmithee indeed and for same reasons we couldn't use top level api/. Functions support will be in server/functions in Nuxt 3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

6 participants