Skip to content

Deploy your Vue application and add your own routes with 2 click !

License

Notifications You must be signed in to change notification settings

mathieutu/vue-cli-plugin-express

Repository files navigation

vue-cli-plugin-express

npm npm vue-cli3

🚀 Add an API in your Vue application in 2 minutes!

This is a vue-cli 3.x plugin to add an Node Express server in your Vue project.


screenshot


⭐ Features:

  • Included fully customizable Express Server:
    • Just add your api routes into your project (with import/export support) without thinking to something else.
    • Optional automatic fallback to the Vue app, to serve both the api and the application with only one command.
    • Optional socket.io support.
  • (soon) Included optional example routes and components.

Table of contents


Getting started

⚠️ Make sure you have vue-cli 3.x.x:

vue --version

If you don't have a project created with vue-cli 3.x yet:

vue create my-new-app

Navigate to the newly created project folder and add the cli plugin:

cd my-new-app
vue add express

Soon: ℹ️ An example APIExample.vue component will be added into your sources if you chose to include the examples.

Usage

To start your server for development purpose, use this commands:

yarn express

The server will be automatically restarted when a change is detected.

You just then have to start the app:

yarn serve

To run the server only once for production use, run:

yarn express:run

Updating vue-cli-plugin-express will update the Express server service 👍

Injected Commands

  • vue-cli-service express:watch

    Run the Express server with info from ./srv and watch the files to restart itself automatically.

  • vue-cli-service express:run

    Run the Express server with info from ./srv once.

Configuration

The Express Server can be configured via the pluginOptions in vue.config.js:

module.exports = {
  // Other options...
  pluginOptions: {
    // Express-related options
    express: {
        shouldServeApp: true,
        serverDir: './srv',
      },
    },
  },
}

Use your app in production

Move @vue/cli-service from devDependenciesto dependencies.

Execute the following commands:

yarn build
yarn express:run

For most of cloud hosting services, you can add a start command that will be triggered automatically:

{
  "scripts": {
    "start": "yarn express:run" 
  }
}

About

Deploy your Vue application and add your own routes with 2 click !

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •