vue-router
vuex
Our great sponsors
vue-router | vuex | |
---|---|---|
46 | 85 | |
19,023 | 28,358 | |
0.0% | 0.1% | |
5.3 | 1.5 | |
10 days ago | 17 days ago | |
JavaScript | JavaScript | |
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
-
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.
-
How to hide root path (/) content when navigating to a different path
I have read through some of the content on router.vuejs.org but I can't find anything related to my issue, or I am not understanding the issue and so not sure what to look for.
-
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.
vuex
-
How to Protect State in Pinia
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.
-
React or Vue, which JS framework is best?
Vue.js also offers built-in features like animation and state management through Vuex which serve a wide range of development needs.
-
Vue 3 vs Vue 2 so far? What's your opinion? Things I didn't like about Vue 3 compared to Vue 2
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.
-
A guide to Vue Lifecycle hooks.
Vuex: https://vuex.vuejs.org/
-
Which one is the favor?
Pinia. No discussion. Have you checked the Vuex website? It says Pinia is default. https://vuex.vuejs.org/
-
How to install and use Vuex4 in nuxtjs 3?
Vuex itself, tells you to not use it and use Pinia instead.
-
Why and how to create an Event Bus in Vuejs 3
Vuex is a state management library. At first glance it seems complicated, and in fact it is a bit. You can use Vuex to store data that should be used globally in your app. Vuex provides you with a solid API to apply changes to this data and reflect them in all child components that use Vuex data store.
-
Vuex: taking user input, adding and removing it from state
I encourage you to also go through Vuex's official documentation: https://vuex.vuejs.org/
-
global data vs emit
And in cases where you need globally available data, best to use Vuex, Pinia, or a composable
-
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.
What are some alternatives?
pinia - 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
axios - Promise based HTTP client for the browser and node.js
vite - Next generation frontend tooling. It's fast!
luci-wrtbwmon - Bandwidth tracker for OpenWRT that uses wrtbwmon
vueuse - Collection of essential Vue Composition Utilities for Vue 2 and 3
Nuxt.js - Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]
ao-loot-logger-viewer - AO Loot Logger Viewer
uuix - A tiny (<1KB) and fast UUID (v4) generator for Crystal
vee-validate - ✅ Painless Vue forms
VuePress - 📝 Minimalistic Vue-powered static site generator
Express - Fast, unopinionated, minimalist web framework for node.