How to use Vue Router in Pinia Store

1 year ago admin Vuejs

This tutorial will show you how to use vue-router inside a Pinia store as plugin, this way you can use the router globally.


How to use the router globally

So first of all in your Pinia store import the vue-router and markRaw from Vue, next you can add them as Plugin to the Pinia store as shown below.

                                                        
                                                                                                                        
import {createApp, markRaw} from 'vue';
import router from '@/routes';
import { createPinia } from 'pinia';

import App from '@/components/App.vue';

const app = createApp({});
const pinia = createPinia();

app.component('app-component', App);

pinia.use(({ store }) => {
    store.router = markRaw(router)
});

app.use(router);
app.use(pinia);

app.mount("#app");

Related Tuorials

How to Get URL Query Params in Vue 3 Composition API

In this lesson, we will see how to get URL query params in Vue 3 composition API, let's assume that...


How to Use Vue js 3 to Generate Random Passwords

In this tutorial, we will see how to use Vue js 3 to generate random passwords, so our application w...


How to Load More Data on a Button Click Using Vue js 3

In today's lesson, we will see how to load more data on a button click using vue js 3, let's assume...


How to Display Images from Laravel Public Folder in a Vue Component

In this lesson, we are going to see how to display images from Laravel public folder in a Vue compon...


Create a Custom 404 Component using Vuejs 3

In today's lesson, we are going to see how to redirect a user to a custom 404 Vue Component if a rou...


How to Add an Auth Middleware with Vue-router

In this lesson we are going to see how to make an auth middleware using vue-router, the middleware w...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 2

In the second part of this project, we will add the home component, and display the products, we wil...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 1

In today's tutorial, we are going to create a shopping cart using Vue js 3 composition API and pinia...


How to Get Query Params in Vue.js 3 Composition API

In this lesson, we are going to see how to get query params using Vue js 3 composition API, let's as...


How to Update an Object's value in Array in Vue js 3

Let's assume that we are working in a shopping cart with Vue js 3, the user adds items to the cart,...