vuex VS vite

Something I have already seen in many different code bases using frontend libraries like React and Vue is that developers use advanced state management solutions (e.g. Redux, Vuex, or Pinia) way too often.

Document address: Vuex official document

To avoid prop drilling we can make use of state management library like Vuex and Pinia, but for this article I will demonstrate of using Vue provide and inject. Let's refactor our components.

Flexibility: Vue is also flexible but provides more built-in solutions out of the box, such as Vue Router for navigation and Vuex for state management. This can reduce the need for additional libraries and make development more straightforward.

If you have been using Vue.js before 3.x you are probably familiar with Vuex now renamed Pinia. It allows you to have a centralized state that is shared across all your application components. If you have ever found yourself in situations where you are passing data/props between components and things are getting complicated, a centralized state is the answer.

Pinia is a relatively new state management tool for the Vue ecosystem. It is the new preferred state management tool recommended by the Vue core team replacing Vuex. Compared to Vuex, Pinia is type-safe by default (direct-vuex was needed to make Vuex type-safe), extremely lightweight, and modular by design (meaning you can create multiple stores instead of multiple modules inside one store, which optimises performance). Similar to Vuex, Pinia has state, computed properties (getters) and methods (mutations and actions). Read more about Pinia and its usage to understand the similarities and differences between Pinia and Vuex.

Vue.js also offers built-in features like animation and state management through Vuex which serve a wide range of development needs.

I really liked the idea of how all the core Vue libraries are maintained by Vue team themselves, making Vue feels like an all-in-one package instead of infinite npm install to add multiple community/personally maintained repos which often caused issues because they don't blend together. And now Pinia will be officially replacing Vuex, making me doubt if it'll be as reliable as Vuex.

Vuex: https://vuex.vuejs.org/

Pinia. No discussion. Have you checked the Vuex website? It says Pinia is default. https://vuex.vuejs.org/

// 📂 container/vite.config.js import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import federation from "@originjs/vite-plugin-federation" // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), federation({ name: "container_app", remotes: { players: "http://localhost:5002/assets/remoteEntry.js" }, shared: { react: { singleton: true, requiredVersion: "^18.0.0" }, "react-dom": { singleton: true, requiredVersion: "^18.0.0" } } }) ], build: { modulePreload: false, target: "esnext", minify: false, cssCodeSplit: false } })

Looks like a lot of them are pinning to tags (which are not guaranteed to change) or SHA (https://github.com/vitejs/vite/blob/8da04227d6f818a8ad9efc00...) which is more hermetic.

We'll use Vite as a bundling solution as both Tailwind CSS and Daisy UI require importing CSS (the Get started with Tailwind CSS guide provides details on using Vite). The vite.config.ts file looks like:

Vite Documentation

The above repo contains a React 18 app created using Vite. The app’s home page displays framework logos and includes a button that tracks how many times it’s clicked:

Have you ever struggled to maintain persistent user data across your app, whether for authentication or other contexts? If so, you're not alone! In this post, I'll share my current approach to tackling this challenge in Next.js or Vite apps.

I began searching for a new test framework, and at the recommendation of Nuck, I gave Vitest a shot. It's by the developers of Vite, which I loved. I don't do a lot of frontend development, but when I do, Vite is often my choice. Unlike many other solutions to frontend builds I've tried in the past, Vite "just works" and involves minimal baggage (looking at you, Angular).

This post shows how to embed the editor in a Bun-powered Vite project handled by Vanilla JS.