KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

vue3-pinia-quasar-ts

★ 88 Open GitHub ↗

(Updated 2024OCT) A minimal template that hooks up Vue 3, Pinia, Quasar, Vue Router, and TypeScript

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue3, Vite, Pinia, Vue Router, Quasar, TypeScript Starter Template

This repo contains a starter template that connects the following pieces:

- [Vue3](https://v3.vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Pinia](https://pinia.vuejs.org/)
- [Vue Router](https://next.router.vuejs.org/guide/)
- [Quasar](https://quasar.dev/)

Quasar is a powerful set of components which uses the Material UI design system.  While the styles are quite plain on their own (and perhaps even off-putting), it is easy to customize it.  I have used it extensively for my own projects like [Turas.app](https://turas.app), [Turas.app Chrome Extension](https://chromewebstore.google.com/detail/turasapp/lpfijfdbgohlblnadiokliolkkeeblpo), [Zeeq.ai](https://zeeq.ai), and [CodeRev.app](https://coderev.app).  It is easy and fast; great for internal tooling and more than usable for public facing apps.

This project has been configured with Material Design Icons for Quasar.  If you'd like to use a different configuration, [see the Quasar docs](https://quasar.dev/start/vite-plugin#using-quasar).

## Rationale

This is inspired by [Evan You's presentation at VueConf Toronto](https://www.youtube.com/watch?v=2KBHvaAWJOA) on the future state of Vue development.

Having worked in Vue and React, one thing that is clear is that the Vue community reflects the fact there is a bit more of what Fred Brookes terms *"conceptual integrity"* because of the nature of how the ecosystem is being designed and architected as a community with a clear direction and leadership.

In the Vue ecosystem, there are a clear set of "best practices" which are coalescing around key building blocks which simplifies the overall architecture and, in my opinion, enhances productivity.

Whereas in the React world, one might have to choose between Redux or Mobx (or Jotai or Zustand or [Valtio](https://betterprogramming.pub/magical-experiments-in-react-state-with-valtio-2b40cf159120)) and live with the compromises of one or the other, I kind of appreciate the fact that Pinia simply got lifted up to Vuex 5 instead of forking and creating two different, fragmented practices for state management.  These core functions of building front-end applications should "just work".

Many of the improvements in Evan's talk have made working with Vue much, *much* more streamlined in my opinion and this starter template pulls them all together!

## What Can You Build With This?

Quasar's default styles can be a bit...bland.  But it's easy enough to overcome this with a bit of CSS, adjusting fonts, and other basic visual adjustments.

Here are some apps I've built on top of this basic scaffold:

- [Turas.app](https://turas.app): a web app for well-organized travelers to plan their itinerary; web, responsive, and PWA!
- [Turas.app Chrome Extension](https://chromewebstore.google.com/detail/turasapp/lpfijfdbgohlblnadiokliolkkeeblpo): a Chrome extension built using this same stack!  Check it out for planning your next trip!
- [Zeeq.ai](https://zeeq.ai): a personal AI agent that watches the FDA ClinicalTrials.gov feed for changes and notifies you.
- [CodeRev.app](https://coderev.app): a lightweight tool to help teams use code reviews as interview but built with Nuxt; [check out the GitHub repo as well](https://github.com/CharlieDigital/coderev)!

Quasar is extremely flexible and a very productive set of components to build on as long as you are willing to take the time to get it to look the way you want.

## Usage

```
cd web
yarn
yarn run dev
```

See the [Vite template README](web/README.md) for more details and notes.

## Organization

The code has been organized under the `/web` directory (planning on adding example backends).

Highlights are below:

```
/src/App.vue                        # Entry point
/src/layouts/MainLayout.vue         # The outer chrome (left nav, top bar)
/src/views/SampleView.vue           # Example of a view or page displayed in the layout
/src/components/HelloWorld.vue      # Default component example with the Vite template
/src/router/routes.ts               # Defines the routes
/src/stores/appState.ts             # Sample application state store
```

The `HelloWorld.vue` shows an example of how to use the global application state store provided by Pinia.

Of note with Pinia is that we get full intellisense 🎉 compared to Vuex.  If you need to, you can create multiple stores (see the Pinia docs for examples).

Additionally, with [Vue Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) instead of Volar and Veture, we finally get full intellisense in the templates as well!

## Notes:

If you're not familiar with Quasar, it is one of ***the best*** and most complete front-end *frameworks* out there.  Compared to the more popular Vuetify, it is:

- more "complete"
- has better controls
- has fantastic, rich documentation and code examples
- comes with pretty much everything one needs; I've rarely found myself having to pull in additional libraries when working with Quasar

All of this means that you can build apps faster and with less friction.

## More Reading

If you are just getting started with Vue, then check out:

- [A Conceptual Model of State in Vue 3.4](https://chrlschn.dev/blog/2024/01/a-conceptual-model-of-state-in-vue-34-using-definemodel/).  A discussion on how Vue 3.4's release of `defineModel` changes the game for state management.
- [Vue 3x3 - A Mental Model for Building Fast](https://chrlschn.dev/blog/2023/01/vue-3x3/). How to simplify your understanding of Vue to 9 core concepts.

vue3-pinia-quasar-ts

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README