Netlify Functions with Vue CLI

Using Netlify Lambda Functions with Vue is something I've had to do a few times. But whenever I have to start fresh I forget the little steps that need to be done to set it up.

There is the Netlify Lambda plugin for Vue CLI but sometimes it's nice to skip the magic.

So this is a quick and dirty run through for a Vue CLI project:

1. yarn add netlify-lambda - Install netlify lambda.
2. touch src-functions - Create the directory for the function source files.
3. Create a netlify.toml file

# netlify.toml

[build]
  # This will be your default build command.
  command = "npm run build"
  # This is where Netlify will look for your lambda functions.
  functions = "functions"
  # This is the directory that you are publishing from.
  publish = "dist"

4. Add /functions to .gitignore
5. Add the proxy to vue.config.js to make local dev easier

// vue.config.js
// ...
devServer: {
  proxy: {
    '/.netlify': {
      target: 'http://localhost:9000',
      pathRewrite: { '^/.netlify/functions': '' },
    },
  },
},
// ...

6. Update package.json scripts
   • "serve": "netlify-lambda serve src-functions & vue-cli-service serve"
   • "build": "netlify-lambda build src-functions && vue-cli-service build"

From here, when running yarn serve the function should be visible on: http://localhost:8080/.netlify/function/[function-name]