msgraph-vue-email

Send email with vue and microsoft graph api

How to run the project

Prerequisites

Setup of an azure spa web appication

1. Go to https://portal.azure.com/

2. Select Microsoft Extra Id

   

3. Select App Registrations

4. Select New Registration

   

   Under Redirect URI, set the first drop-down to Single-page application (SPA) and set the value to http://localhost:5173 (or whenever hostname will run the app).

   

   Click Register

5. Write down Application (client) ID, will be used in .env as VITE_MSGRAPH_APP_ID Write down Directory (tenant) ID, will be used in .env as VITE_MSGRAPH_TENANT_ID

6. Go to Api Permissions

   

   Add a permission Select Microsoft graph Select Delegated Permissions Select Mail.Send

   

To run the project you need the following:

• Node.js installed on your development machine. If you do not have Node.js, visit the previous link for download options. (Note: This tutorial was written with Node version 20.10.0. The steps in this guide may work with other versions, but that has not been tested.)
• Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.

Install node modules

npm install

Set up environment variables

1. Copy the .env.example to .env and make the necessary changes to it, based on the instrunctions above.

Run the application

1. Run the following command in your CLI to start the application.

npm run dev

2. Open a browser and browse to http://localhost:5173.