rifandani / vue-app

Bulletproof Vue 3 SPA template

Intro

An opinionated and scalable project starter and reference for building bulletproof production ready Vue applications.

Intro

Vue is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write Vue applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.

This repo attempts to present a way of creating Vue applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with different codebases, this architecture turns out to be the most effective.

The goal here is to serve as a collection of resources and best practices when developing Vue applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers write better applications.

Feel free to explore the codebase to get the most value out of the repo. For a full documentation, check out the docs folder in the root of the repo.

License

MIT

vue-app's Issues

offline-first PWA

Weird behavior where sometimes HMR results in blank app

suspects:

• PWA thing
• primevue lara themes

Consider using vue 18n intlify

• https://vue-i18n.intlify.dev/guide/

Use Storybook

What problem is this solving

• build, view, test, debug, and document UI components in isolation
• develop hard-to-reach states and edge cases without needing to run the whole app
• track components history and versions
• we can publish the documented UI components
• hundreds of addons that helps build UI faster, document component libraries, and integrate with other tools

Proposed solution

• delete all demo components in /playground
• use storybook
• setup storybook CI

Describe alternatives you've considered

No response

Uninstall testing-library, use Playwright for component & E2E tests instead

Still experimental features -> https://playwright.dev/docs/test-components

Migration from testing-library -> https://playwright.dev/docs/testing-library

Uninstall primevue, use radix-vue instead

Primevue pro:

• a LOT of components 👍 👍

Primevue cons:

• not composables, like radix-vue (biggest concerns) 👎 👎
• the concept of passthrough or pt is a hassle and not typesafe. They need this pt, because they didn't compose the components correctly. The mergeProps and mergeSections also a hassle. 👎

---

radix vue pro:

• composables 👍 👍

radix vue cons:

• not much components 👎

Use eslint flat config

The eslint flat config is the new recommended approach.

From v8.21.0, eslint announced a new config system.
In the new system, .eslintrc* is no longer used. eslint.config.js would be the default config file name.
In eslint v8, the legacy system (.eslintrc*) would still be supported, while in eslint v9, only the new system would be supported.

And from v8.23.0, eslint CLI starts to look up eslint.config.js.
So, if your eslint is >=8.23.0, you're 100% ready to use the new config system.

You might want to check out the official blog posts,

• https://eslint.org/blog/2022/08/new-config-system-part-1/
• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://eslint.org/blog/2022/08/new-config-system-part-3/

and the official docs.