(Feature) Setup

[AndreasNasman]

Detailed Description

General

• Migrate to Vite
• Add Vue Router
• Add TailwindCSS with its just-in-time compiler
• Add an @ alias

Formatting and linting

• Add ESLint with JavaScript Standard Style and eslint-plugin-vue
• Add Prettier
• Add an EditorConfig file
• Format and lint all files
• Configure linting, formatting, and Typescript compilation to run on a Git pre-commit hook.
• Add a GitHub action for linting and formatting.

PWA

• Add vite-plugin-pwa
• Configure a manifest

Testing

• Add Mocha + Chai for unit testing
• Add Cypress for E2D testing

Clean up

• Remove all eslint-disables, if possible
• Prefer named exports, potentially in a index.ts file

---

Disregarded

• Change from npm to yarn No advantage of using yarn, at least for our use case.
• Add stylelint No need (at least initially) since we want to use Tailwind CSS.
• index.html title reference Seldom you want the index.html to be the same as the name in package.json.

Context

It's easier to develop once all this stuff is in place.

Possible Implementation

Complete all tasks above.

[create-issue-branch]

Branch issue-1-Setup created!

[dusan-turajlic]

Run lint, formatting, and compilation before commits.

Why? I would rather change that to setup github action for linting. I'm not a fan of tasks running when I do my commits

[dusan-turajlic]

Change from npm to yarn

Is there a reason for this? IDK but I have kinda just been sticking with NPM for most of my tasks lately and have not encounterd any issues

[dusan-turajlic]

Also should this maybe be split in to a few issues. Some of these can be done in pararell.

[AndreasNasman]

Run lint, formatting, and compilation before commits.

Why? I would rather change that to setup github action for linting. I'm not a fan of tasks running when I do my commits

I agree that there should be GitHub action checking this, but I like to catch errors and warnings as soon as possible, so that's why I like having formatting and linting checks on pre-commit Git hooks. Not sure what's the easiest way to have this conveniently be turned on and off according to preferences. 🤔

Change from npm to yarn

Is there a reason for this? IDK but I have kinda just been sticking with NPM for most of my tasks lately and have not encounterd any issues

Not sure why I put this here, npm is fine for me too! 👍

Also should this maybe be split in to a few issues. Some of these can be done in pararell.

I kinda want to do this myself in one go as I'm going to document this process – might put post migration process online somewhere too – and use it at work if possible. 🙂 Most of the items on the checklist are minor issues anyway; connecting them all is a bit more tricky.

[AndreasNasman]

Chosen Vue CLI options for reference