functions/ directory

[atinux]

Update: Implementation specs: https://gist.github.com/pi0/76bd2991ebe0b575a0eac08bb7a2e668

Introduction

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.

functions/helloWorld.js

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).

pages/hello.vue

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

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

    return { title }
  }
}
</script>

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' orstatic``, 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

[codeofsumit]

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

[cosbgn]

@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 = $functions.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!

[btkostner]

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

[atinux]

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".

[atinux]

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

[wasmithee]

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

[pi0]

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