Build a Serverless Vue App with Midway FaaS – Step‑by‑Step Guide

Getting Started

First install the Midway FaaS CLI tool: $ npm i @midwayjs/faas-cli -g Create a new project using the faas-vue template, either through the interactive f create command or directly:

f create --template-package=@midwayjs-examples/faas-with-vue

Vue Integrated Structure

The example is generated with vue-cli (TypeScript). Its file tree looks like this:

.
├── README.md
├── babel.config.js
├── f.yml            # function configuration file
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src               # Vue source code
│   ├── App.vue
│   ├── apis          # serverless functions
│   │   ├── config
│   │   │   └── config.default.ts
│   │   ├── configuration.ts
│   │   └── index.ts
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── shims-tsx.d.ts
│   └── shims-vue.d.ts
├── tsconfig.json
└── vue.config.js    # Vue plugin configuration

6 directories, 17 files

The src folder holds the front‑end code, while the apis folder contains the serverless function code. The function part includes:

f.yml – function definition file

package.json – additional function dependencies (midway‑faas and vue‑cli‑plugin‑faas)

Files inside the apis directory

Local Development

Run the app locally with: npm run serve The development server automatically calls the function to fetch data. Open http://127.0.0.1:8080/ in a browser to see the result.

Vue Plugin

Unlike React’s setupProxy.js, Vue wraps Webpack configuration in its own plugin system. The vue-cli-plugin-faas plugin enables seamless integration: running npm run serve starts both Vue and the serverless functions.

Deployment

Before deploying, build the front‑end assets: npm run build The compiled files are placed in the build directory. The function configuration already points to this directory, so the resources are served by the function.

Deploy with: f deploy By default this publishes to Alibaba Cloud, but Midway FaaS also supports other cloud providers. The vue.config.js file is adjusted to output to build:

module.exports = {
  outputDir: "build",
  pluginOptions: {
    faas: {
      // ...
    }
  }
};

After deployment, the function hosts the static assets, and a CDN can be used to reduce costs.

Conclusion

You now have a complete workflow for building, running, and deploying a serverless Vue application with Midway FaaS. Feel free to explore other examples and star the project on GitHub.