This is a solution to the Expenses chart component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Users should be able to:

• View the bar chart and hover over the individual bars to see the correct amounts for each day
• See the current day’s bar highlighted in a different colour to the other bars
• View the optimal layout for the content depending on their device’s screen size
• See hover states for all interactive elements on the page

• Solution URL: https://frontend-mentor-expense-tracker.vercel.app/

• Vue3 - Composition API
• SCSS

This project main goal was to learn Vue3. This is my first contact with Vue and I found it to be very pleaseant to work with. I enjoyed the Single File Component (SFC) structure and the Composition API makes it easy to keep the front-end code organized and clean.

I still have to try a lot of the reactivity features of Vue, data fetching and state management.

• Linkedin - in/arthurpenteado
• Frontend Mentor - @yourusername
• My blog - https://artcodes.dev

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

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.

See Vite Configuration Reference.

yarn dev

yarn build

# When testing on CI, must build the project first
yarn build

yarn lint