FUNCTION_INVOCATION_FAILED error on Vercel and Nuxt deployment - vue.js

Question

Imported a Nuxt project from GitHub with vercel.json config:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder"
}
]
}
My package.json:
{
"name": "test-app-v2",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "yarn lint:js"
},
"lint-staged": {
"*.{js,vue}": "eslint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"#nuxtjs/composition-api": "^0.24.0",
"#nuxtjs/pwa": "^3.3.5",
"core-js": "^3.9.1",
"nuxt": "^2.15.3"
},
"devDependencies": {
"#nuxt/types": "^2.15.3",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/eslint-config-typescript": "^6.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/vuetify": "^1.11.3",
"babel-eslint": "^10.1.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.7.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1"
}
}
and nuxt.config.js
import colors from 'vuetify/es5/util/colors'
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
titleTemplate: '%s - test-app-v2',
title: 'test-app-v2',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
'#nuxtjs/composition-api/module',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
],
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: 'en',
},
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
},
},
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
}
I have no API yet and this is the error log in function tab:

Answer 1

Wasn't the OPs aim to deploy it using SSR? Using build command yarn generate will just generate a static site.

Answer 2

EDIT: updating the build command fixed OP's issue.
Do you even need the vercel.json here?
I've tried to host one of my repo there and it's working fine with those settings only.
Hosted there: https://nuxt-tailwind-typography-darkmode-boilerplate.vercel.app/
Vercel pretty much self-detected that it was a Nuxt project and almost aced it itself.