Aleksandar Brkić Posts - Answer Overflow

Aleksandar Brkić

•Created by Aleksandar Brkić on 6/4/2024 in #❓・help

Prevent rerendering of page going back

I have a structure like this

pages/
  list.vue
  list/
    [filter1]/
      [filter2].vue
    [filter1].vue
    single-[post-id]/
      [post-author].vue

pages/
  list.vue
  list/
    [filter1]/
      [filter2].vue
    [filter1].vue
    single-[post-id]/
      [post-author].vue

with the [post-author].vue acting like a modal inside of list that has a <NuxtPage /> inside it. I added a key inside of definePageMeta in the list.vue file When i scroll through it and enter a single post and go back, it remains intact and works perfectly without rerendering. However, if I visit some filters and then enter the post and go back, the filters re-render as the post is not a child of filters but of list. Is there any way to prevent rerendering /list children whilst navigating from list/single-123/[post-author] to list/filter1/filter2 ?

1 replies

NNuxt

•Created by Aleksandar Brkić on 5/27/2024 in #❓・help

Unknown order of nested routes

So i have a couple of thoughts on how to do this, but neither of them seems optimal. tldr; When someone goes to /time-7-15/latitude-40-50/ the page should render a list of all objects that have values in that range. I need to have nested routes, let's call them filters. The filters are time, latitude and longitude. Each filter is based on ranges, so time can be 7-15 or 15-23 and latitude can be 40-50 or 50-60 (similar for longitude). So examples of routes: /time-7-15 or /time-7-15/latitude-40-50 or /latitude-40-50 or /latitude-50-60/longitude-20-30 or /time-15-23/latitude-40-50/longitude-20-30 etc etc, so by either one of the filters, but also you can omit some and have the other. Based on the route, i need to have the resulting rendered list. I was thinking to have a shared layout and in the filters checkbox component have a v-if based on the route params but... Because the order is not always the same (for instance you can have time and lat, or just lat without the time) i cannot do it like

index/
  [...time].vue
  [...time]/
    [...lat].vue

index/
  [...time].vue
  [...time]/
    [...lat].vue

because lat is not nested in time (but can be). What is the correct way of dealing with these types of nested routes?

7 replies

NNuxt

•Created by Aleksandar Brkić on 4/26/2024 in #❓・help

Dynamic nested pages

Is there a way to have a route structure where there is an unknown amount of slugs eg:

example 1:
site. com/filterX/filterY/list
site. com/filterX/filterY/list/single-post

example 2:
site. com/filterY/list
site. com/filterY/list/single-post

example 1:
site. com/filterX/filterY/list
site. com/filterX/filterY/list/single-post

example 2:
site. com/filterY/list
site. com/filterY/list/single-post

So that the filters will always affect the list, eg clicking on a filter will add a slug but not rerender the page, just the list component? Tried with index folder that has [...slug].vue but not sure how to have single-post after that regardless of the number of slugs?

9 replies

NNuxt

•Created by Aleksandar Brkić on 4/10/2024 in #❓・help

Event name from variable

I was wondering if there was a way of emitting an event whose name comes from a variable. For instance:

const emit = defineEmits<{
  close: void[]
  open: void[]
}>()
const eventName = ref<'close' | 'open'>('close')
emit(eventName.value) // ts error No overload matches this call.

const emit = defineEmits<{
  close: void[]
  open: void[]
}>()
const eventName = ref<'close' | 'open'>('close')
emit(eventName.value) // ts error No overload matches this call.

3 replies

Gaming

Programming