CMC MC Dashboard

A dashboard to show various bits of data from the CMC MC server.

Useful links

• Vue Docs
  • Vite Configuration Reference
• Tailwind Docs
• Tailwind templates
• Flowbite components

Local Setup

IDE & tools

• VS Code
  • Extension Vue (Official) (and disable Vetur).
• Node 25 or later

Config

Create the file .env.local in the root folder with the following contents

VITE_API_URL="https://api.smponlinedashboard.com"
VITE_DISCORD_LOGIN_URL="https://discord.com/oauth2/authorize?client_id=1485066053850632384&response_type=token&redirect_uri=http%3A%2F%2Flocalhost%3A5173%2Flogin%2Fdiscord&scope=identify"

Running

In the terminal

# Install current packages
npm ci

# Run the project
npm start

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

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.