vue-router
pinia
Our great sponsors
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 |
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
-
Build complex SPAs quickly with vue-element-admin
//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
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
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
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
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
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
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
We run this terminal command to enable our application to use Vue Router.
- Meta Is Transferring Jest to the OpenJS Foundation
-
Build an Online Course Site with Vue
Weβll also need Vue Router for setting up the course pages.
pinia
-
Better DX in Vue apps with Vite Devtools
Pinia tab is a feature integrated with Pinia, allowing you to view the registered modules and their details.
-
Alternative libs to migrate from React to Vue (or Vue to React)
pinia
-
Pinia setup or option?
One caveat: some plugins might not work without a workaround.
-
Making Nuxt.js clone with Vue 3 and Vite (Vue Server Side Rendering)
const authMiddleware: Middleware = ({ pinia }) => { // !!! Important !!! // tell all the stores you are contacting // Pinia instance, otherwise you will have problems because Pinia will access the global object // https://github.com/vuejs/pinia/blob/8626aac0049243de231401a01fe20092eeaf279c/packages/pinia/src/store.ts#L870 if (!authStore(pinia).isAuth) { return { path:'/login', status: 401, } } }
-
GlitchyNFT - Appwrite Hackathon
Pinia
-
Learn How To Create, Test and Deploy a Single Page App with Vue 3 + Vite and Pinia
Pinia Discussions on Github
-
Vite 2.x + Vue 3.x + quasar 2.x + windcss 3.x starter β‘
- pinia[Intuitive, type safe and flexible Store for Vue]
-
Learn to make a web app with ASP NET Core and Vue?
With Vue, the key is to use Vuex (or alternately, Pinia) to build an MVC front-end.
-
New default recommendations
For the lazy https://github.com/posva/pinia
What are some alternatives?
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