vue-router VS pinia

Compare vue-router vs pinia and see what are their differences.

vue-router

🚦 The official router for Vue 2 (by vuejs)

pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support (by vuejs)
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
vue-router pinia
46 33
19,013 12,212
-0.0% 2.0%
5.3 9.2
6 days ago about 8 hours ago
JavaScript TypeScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

vue-router

Posts with mentions or reviews of vue-router. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-03-30.
  • Build complex SPAs quickly with vue-element-admin
    6 projects | dev.to | 30 Mar 2023
    //src/router /* eslint-disable */ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Layout from '@/layout' export const constantRoutes = [ { path: '/redirect', component: Layout, hidden: true, children: [ { path: '/redirect/:path(.*)', component: () => import('@/views/redirect/index') } ] }, { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/auth-redirect', component: () => import('@/views/login/auth-redirect'), hidden: true }, { path: '/404', component: () => import('@/views/error-page/404'), hidden: true }, { path: '/401', component: () => import('@/views/error-page/401'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', component: () => import('@/views/dashboard/index'), name: 'Dashboard', meta: { title: 'Dashboard', icon: 'dashboard', affix: true } } ] }, { path: '/posts', component: Layout, children: [ { path: 'index', component: () => import('@/views/posts/index'), name: 'Posts', meta: { title: 'Posts', icon: 'post', affix: true } } ] }, { path: '/profile', component: Layout, redirect: '/profile/index', hidden: true, children: [ { path: 'index', component: () => import('@/views/profile/index'), name: 'Profile', meta: { title: 'Profile', icon: 'user', noCache: true } } ] } ] /** * asyncRoutes * the routes that need to be dynamically loaded based on user roles */ export const asyncRoutes = [ // 404 page must be placed at the end !!! { path: '*', redirect: '/404', hidden: true } ] const createRouter = () => new Router({ scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router } export default router
    6 projects | dev.to | 30 Mar 2023
    This project uses Vue Router 3. Here, we have two types of routes: asyncRoutes and constantRoutes.
  • How to make Vite not unload the previous route
    2 projects | /r/vuejs | 12 Dec 2022
    https://github.com/vuejs/vue-router/issues/703 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0036-router-view-route-prop.md https://github.com/vuejs/vue-router/issues/703#issuecomment-428123334
  • In One Minute : Vue.js
    5 projects | dev.to | 10 Nov 2022
    What makes Vue particularly powerful, however, is that it can be built upon, increasing its functionality from a simple view-model library to that of a fully fledged JavaScript framework capable of powering entire SPA's via supporting plugins and libraries such as Vue Router, Vue Resource, and Vuex.
  • Workplaces for digital nomads: the frontend
    9 projects | dev.to | 1 Nov 2022
    A simple src/router/index.js router based on vue-router allows you to avoid utilising the store for now (with the current project capabilities) and helps with 404 error handling.
  • Creating a Next-like layout system in Vue
    5 projects | dev.to | 13 Aug 2022
    So to start, in the land of Vue we use Vue Router for routing. It is a first party plugin and solves all your routing needs, providing both Web History and Hash based routing. Additionally, it supports nested routes and router views.
  • Introduction to the VueJs Framework
    7 projects | dev.to | 21 Jun 2022
    Vue has a wide range of use cases that span the whole scale of front-end development. We can use it to add a bit of dynamism into an existing web app, such as adding a simple carousel or content that changes on user interaction e.g mouse movements or text input to creating complex web apps such as e-commerce stores with multiple categories and product pages supporting routing, browser-based data storage via Vue's own libraries such as the vue-router and vuex with features such as a cart, external API call requests and so forth.
  • Create a Real-Time Food Ordering Notification Service in Vue.js
    4 projects | dev.to | 31 May 2022
    We run this terminal command to enable our application to use Vue Router.
  • Meta Is Transferring Jest to the OpenJS Foundation
    9 projects | news.ycombinator.com | 11 May 2022
  • Build an Online Course Site with Vue
    3 projects | dev.to | 25 Apr 2022
    We’ll also need Vue Router for setting up the course pages.

pinia

Posts with mentions or reviews of pinia. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-05-29.

What are some alternatives?

When comparing vue-router and pinia you can also consider the following projects:

effector-react - Business logic with ease β˜„οΈ

vuex - πŸ—ƒοΈ Centralized State Management for Vue.js.

vuex-orm - The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

composition-api - Composition API plugin for Vue 2

harlem - Powerfully simple global state management for Vue 3

unplugin-auto-import - Auto import APIs on-demand for Vite, Webpack and Rollup

vue-demi - 🎩 Creates Universal Library for Vue 2 & 3

vuex-multi-tab-state - πŸ’ΎπŸ”—πŸ–₯️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.

vue-timer-hook - Vue timer hook is a custom hook, built to handle timer, stopwatch, and time logic/state in your vue 3 component.

vue-svelte-size-analysis - Comparing generated code size of Vue and Svelte components

axios - Promise based HTTP client for the browser and node.js

vuejs-confirm-dialog - Makes simple to create, reuse, promisify and build chains of modal dialogs in Vue.js