Inject native router only in reactive scopes (#1730)

pages/[type]/[id]/changelog.vue

@@ -103,7 +103,9 @@ useSeoMeta({
   ogDescription: description,
 })
 
+const router = useNativeRouter()
 const route = useNativeRoute()
+
 const currentPage = ref(Number(route.query.p ?? 1))
 const filteredVersions = computed(() => {
   const selectedGameVersions = getArrayOrString(route.query.g) ?? []
@@ -126,9 +128,6 @@ const filteredVersions = computed(() => {
 function switchPage(page) {
   currentPage.value = page
 
-  const router = useRouter()
-  const route = useNativeRoute()
-
   router.replace({
     query: {
       ...route.query,

pages/[type]/[id]/settings/index.vue

@@ -283,7 +283,7 @@ const props = defineProps({
 })
 
 const tags = useTags()
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref(props.project.title)
 const slug = ref(props.project.slug)

pages/[type]/[id]/versions.vue

@@ -151,7 +151,9 @@ useSeoMeta({
   ogDescription: description,
 })
 
+const router = useNativeRouter()
 const route = useNativeRoute()
+
 const currentPage = ref(Number(route.query.p ?? 1))
 const filteredVersions = computed(() => {
   const selectedGameVersions = getArrayOrString(route.query.g) ?? []
@@ -174,9 +176,6 @@ const filteredVersions = computed(() => {
 function switchPage(page) {
   currentPage.value = page
 
-  const router = useRouter()
-  const route = useNativeRoute()
-
   router.replace({
     query: {
       ...route.query,
@@ -186,7 +185,6 @@ function switchPage(page) {
 }
 
 async function handleFiles(files) {
-  const router = useRouter()
   await router.push({
     name: 'type-id-version-version',
     params: {

pages/dashboard/notifications.vue

@@ -69,7 +69,7 @@ useHead({
 const auth = await useAuth()
 
 const route = useNativeRoute()
-const router = useRouter()
+const router = useNativeRouter()
 
 const history = computed(() => {
   return route.name === 'dashboard-notifications-history'

pages/moderation/review.vue

@@ -118,6 +118,8 @@ useHead({
 
 const app = useNuxtApp()
 
+const router = useRouter()
+
 const now = app.$dayjs()
 const TIME_24H = 86400000
 const TIME_48H = TIME_24H * 2
@@ -195,8 +197,6 @@ if (projects.value) {
   }
 }
 async function goToProjects() {
-  const router = useRouter()
-
   const project = projectsFiltered.value[0]
   await router.push({
     name: 'type-id',

pages/search/[searchProjectType].vue

@@ -574,6 +574,8 @@ const pageCount = computed(() =>
   results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1
 )
 
+const router = useNativeRouter()
+
 function onSearchChange(newPageNumber) {
   noLoad.value = true
 
@@ -586,7 +588,6 @@ function onSearchChange(newPageNumber) {
   refreshSearch()
 
   if (process.client) {
-    const router = useRouter()
     const obj = getSearchUrl((currentPage.value - 1) * maxResults.value, true)
     router.replace({ path: route.path, query: obj })
   }