README.md

🥁 vite-vue3-ts-drumkit 🥁

From Monday, February 7, 2022, the vue core team have make Vue3 the new default version for new projects. 🎉 🎉 🎉

It comes with a lot of new libraries and features, and I wanted to go deeper in this new ecosystem.

With this project I would like to experiment with these new feats. 💪

---

📖 Required knowledge

• HTML

• CSS

• JavaScript

• TypeScript

• Vue.js (v.3)

• Vite (bundler, dev server, Frontend Tooling)

  🚧 For WIP features:

• Pinia (new default global state manager)

• Vitest (new suggested test enviroment)

• Storybook (my personal preference for UI interfaces development, testing and documentation)

---

👩🏻‍💻👨🏻‍💻 Installation and Usage

To install the project, run the following command:

    > git clone
    > cd <project-folder>
    > npm install

🧑‍💻 Compile and Hot-Reload for Development

    npm run dev

🏗️ Type-Check, Compile and Minify for Production

    npm run build

✅ Run Unit Tests with Vitest

    npm run test:unit

🚨 Lint with ESLint

    npm run lint

For further scripts, see package.json.

---

🎨 Styleguide

The project code is written and organized following the Vue Styleguide.

---

🏷️ Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so the tsc CLI is replaced by vue-tsc for type checking.

In editors, TypeScript Vue Plugin (Volar) is needed to make the TypeScript language service aware of .vue types.

Volar has implemented a Take Over Mode for maximum performance. It should be enabled 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.

# WARNING
After installing VOLAR, VETUR should be disabled for the current workspace.

---

🔧 Customize configuration

See Vite Configuration Reference.

---

💻 Recommended IDE Setup

Because my love for it, I strongly suggest VSCode as the recomended IDE for this project. 💖 💖 💖

To improve the development experience, I recommend the installation of the following extensions:

• ESLint
• Prettier
• Volar ( IMPORTANT: disable Vetur, see above )
• TypeScript Vue Plugin (Volar)
• Auto Close Tag
• Auto import
• Auto Rename Tag
• Babel JavaScript
• Bracket Pair Colorizer 2
• DotENV
• Git Graph
• GitLens
• Live Share
• npm Intellisense
• Path Intellisense
• Sass
• SCSS Formatter
• TODO Highlight
• vue-jsdoc

---

🚧 THIS IS A WORK IN PROGRESS 🚧

I've currenty put in this project 10 hours of work, and I would like to improve the following:

• Add Storybook to write a simple documentation for the project.
• Add storybook-builder-vite to increase the DX of the documentation process.
• Write meaningful tests for the project.
• Try to record the keyboard pattern that the user plays and display it in the UI. This could be a fun way to experiment with Pinia.

---

🐞 Issues / 📝 Discussions / 👥 Contribution

Wanna help?

Feel free to open issues, make suggestions via discussions, or Contribute.

Thanks to have watch and tried this repo 💘.

---

🆓 License

MIT License // Copyright (©) 2022-now Gianluca Bianco