• Overview
  • Application Structure
• Setup
  • Recommended IDE Setup
  • Type Support for .vue Imports in TS
  • Customize configuration
• Build, Test and Run
  • Install Dependencies
  • Environment Variables
  • Run Locally
  • Type-Check, Compile and Minify for Production
  • Run Unit Tests with Vitest
  • Run End-to-End Tests with Playwright
  • Lint with ESLint
  • Format with Prettier
• To Do

Overview

Building an MS Exchange email client using:

• shadcn-vue
• Microsoft Graph API

This is based on the shadcn-vue Mail example.
The code for that example is located here.

Since the Microsoft Graph JavaScript Client Library is too complicated to setup properly and since it doesn't add a lot of value, we don't use it.

Since the MSAL.js + Vue 3 + TypeScript Sample is complicated, the authentication aspect is based on Dave Stewart's article: A guide to MSAL authentication in Vue.

Application Structure

Setup

We follow the Vite installation instructions for shadcn-vue.

• Use create-vue package to scaffold the project as described in Vue's tooling documentation page.

This will use Vite as the build tool and development environment.

• Add Tailwind and its configuration
• Edit tsconfig.json
• Update vite.config.ts
• Delete default Vite styles
• Set up the project to use shadcn-vue:

• Update main.ts to use Tailwind styles

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Build, Test and Run

Install Dependencies

npm install

Environment Variables

Create a .env file at the root of the project and specify the following variables:

VITE_MSAL_CLIENT_ID=
VITE_MSAL_TENANT_ID=

The meaning of those environment variables is explained here.

Run Locally

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint

Format with Prettier

npm run format

To Do

• Fix the Reply issue:

This seems to be due to the usage of a trial teanant as explained here.

• Add Husky hooks
• Get rid of element-plus and use shadcn-vue instead.