Inject native router only in reactive scopes (#1730)

components/ui/CollectionCreateModal.vue

@@ -42,7 +42,7 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref('')
 const description = ref('')

components/ui/ModerationChecklist.vue

@@ -996,9 +996,9 @@ async function sendMessage(status) {
   stopLoading()
 }
 
-async function goToNextProject() {
-  const router = useRouter()
+const router = useNativeRouter()
 
+async function goToNextProject() {
   const project = props.futureProjects[0]
 
   if (!project) {

components/ui/OrganizationCreateModal.vue

@@ -56,7 +56,7 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref('')
 const slug = ref('')

components/ui/VersionFilterControl.vue

@@ -98,6 +98,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['switch-page'])
 
+const router = useNativeRouter()
 const route = useNativeRoute()
 
 const tags = useTags()
@@ -130,9 +131,6 @@ const selectedLoaders = shallowRef(getArrayOrString(route.query.l) ?? [])
 const selectedVersionTypes = shallowRef(getArrayOrString(route.query.c) ?? [])
 
 async function updateQuery() {
-  const router = useRouter()
-  const route = useNativeRoute()
-
   await router.replace({
     query: {
       ...route.query,

components/ui/charts/ChartDisplay.vue

@@ -308,7 +308,7 @@ import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from '#c
 
 import PaletteIcon from '~/assets/icons/palette.svg?component'
 
-const router = useRouter()
+const router = useNativeRouter()
 const theme = useTheme()
 
 const props = withDefaults(

composables/nuxt-bugfest.ts

@@ -1 +1 @@
-export { useRoute as useNativeRoute } from 'vue-router'
+export { useRoute as useNativeRoute, useRouter as useNativeRouter } from 'vue-router'

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 })
   }