Music Assistant frontend (Vue PWA)

The Music Assistant frontend/panel is developed in Vue, development instructions below.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

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 TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

nvm use node
yarn install

Compile and Hot-Reload for Development

yarn dev

This will launch an auto-reload development environment (usually at http://localhost:3000) Open the url in the browser and a popup will ask the location of the MA server. You can either connect to a locally launched dev server or an existing running server on port 8095.

Type-Check, Compile and Minify for Production

yarn build

Lint with ESLint

yarn lint

UI Framework

This project is migrating from Vuetify to shadcn-vue as its primary UI component library.

Guidelines

• All new features should be built using shadcn-vue components
• Shadcn-vue components are located in src/components/ui/
• When working on existing features that use Vuetify, consider refactoring them to use shadcn-vue components if you have time
• Refer to the shadcn-vue documentation for available components and usage examples

Translation Management

We use Lokalise to manage the translation files for the Music Assistant frontend

Contributing

If you wish to assist in translating Music Assistant into a language that it currently does not support, please see here https://music-assistant.io/help/lokalise/.

---