Nuxt•5mo ago

how to use router in a pinia store in Nuxt 3?

Hi guys! How can I use router in a pinia store?

6 Replies

Same way you would in your pages, components, composables, etc

don't think so I'm migrating a Vue 3 SSR project to Nuxt 3 and I have a store where I access the router using this.router and it returns undefined when I console it Currently, I have a functionality that is broken because of that Tried const router = useRouter() but also returns undefined when I console it

Kealanau•5mo ago

Why would you be keeping the router stored in Pinia? Are you looking for the nuxt context?

Kealanau•5mo ago

https://pinia.vuejs.org/core-concepts/plugins.html#Nuxt-js https://pinia.vuejs.org/core-concepts/plugins.html#Introduction Reading through this, it seems like you'd be needing to set like

import { markRaw } from 'vue'
// adapt this based on where your router is
import { router } from './router'

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

import { markRaw } from 'vue'
// adapt this based on where your router is
import { router } from './router'

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

Pinia 🍍

Intuitive, type safe, light and flexible Store for Vue

hz2222•5mo ago

I made a plugin : export default function ({ $pinia, $router }) { $pinia.use(({ store }) => { store.$router = $router }) } and now its working

Victor Neves•5mo ago

@Kealanau I just want to send the user to a page if it match some conditions I was able to access it this way

const nuxtApp = useNuxtApp()
const router = nuxtApp.$router

const nuxtApp = useNuxtApp()
const router = nuxtApp.$router

there's also the option to use navigateTo() when only to redirect and there's no need to access the router object

Gaming

Programming

how to use router in a pinia store in Nuxt 3?