Vue Ecosystem

There are a variety of packages that I use with Vue to speed up development and improve maintainability. Some packages have support for tree shaking so that only the parts you import end up in production, reducing the final bundle size.

• Pinia - The official state management tool for Vue (replaces Vuex). Allows you to keep track of the state across your entire app.
• Vue Router - The official router for Vue. Allows you to add routes to your single page application.
• Vitest - A Vite-native framework for writing unit tests. Compatible with Jest.
• Vue Test Utils - Allows you to test Vue components
• VueUse - Offers a collection of utilities for doing things like getting mouse postion, listening for key presses and changing the browser title.
• Nuxt - Capable of server-side rendering and static site generation.
• Nuxt Content - Allows you to convert markdown files to pages on your website.

How I Use Vue

I use Vue to build single page applications, static websites with Nuxt, and components within Laravel applications. I still have some projects that were built with Vue 2 and still use the Options API, however, for all new projects I am only using Vue 3 and the Composition API. I follow the single responsibility principle when designing component, however sometimes a component gets bloated and so I refactor it. For resuable code I write ES6 modules so I can import functions and reuse code across components.

For single page apps I use Vue Router. I haven't used Vue Router with Vue and Laravel because Laravel already takes care of that.

For statically generated websites such as this one I use Nuxt. The previous version was also built with Nuxt.

Besides applications I am also using Vue to build a component library. I host the private package on Github Package Registry and can import it into any of my Vue projects.