N
Nuxtvinum

Make `useRoute()` update in layout

Hi! Im trying to use useRoute() in a layout, to update my navigations links based on the ´route.params.id´, but the route object does not update when going from page to page. How do i make the layout update the route object? Any help is greatly appreciated. Thanks
P
pyplacca13d ago
share a snippet of your code
V
vinum13d ago
Won't really help but sure.
No description
P
pyplacca13d ago
converting links to a computed state should solve the problem. @Wicker answered you here https://discord.com/channels/473401852243869706/473406506579263488/1225043516317503538
W
Wicker13d ago
Assuming it would look like this, i cant really answer you if i dont have the whole picture
const route = computed(()=>{
return useRoute().params.site
})
const route = computed(()=>{
return useRoute().params.site
})
P
pyplacca13d ago
something along those lines @vinum, this is what you'd want to have;
const links = computed(() => [{
...,
to: '/site-' + route.params.id + '/'
}])
const links = computed(() => [{
...,
to: '/site-' + route.params.id + '/'
}])
V
vinum13d ago
Thanks guys, this worked perfectly @pyplacca How do i use .map on the array? When it was not computed it worked fine but after it throws this error links.map is not a function. Thanks
P
pyplacca13d ago
the .map call should be on the array's square parenthesis otherwise, you can do this; links.value.map links is now a computed ref so it's value is returned from the value property
V
vinum13d ago
Once again, you saved me 🙂
P
pyplacca13d ago
you're welcome
P
pyplacca13d ago
@vinum, you can read more on computed properties here to learn other advanced usages
Vue.js
Vue.js - The Progressive JavaScript Framework
Want results from more Discord servers?
Add your server
More Posts
How do you set a PostCSS parser in the `nuxt.config.ts`?I'm trying to do that but it seems the "parser" option isn't allowed on the object.Auto-import only Nuxt and Vue features but no custom or third party codeHey! I wonder: is it possible to disable auto imports for components, composables, and utils while kuseAsyncData weird behaviorHi guys, I'm experiencing a strange behavior. I'm using async data to call an API. But there is a coProblem with sending POST/GET Request at the same timeNow I'm looking to load the last projects of a user from the database by sending his name and receivNuxt Content behind CloudflareWhen I use Nuxt Content behind Cloudflare, I have the issue that some pages (but not all) cannot be Odd situation with Nuxt hosting and site accessibilityHey everyone. First post on this Discord. We have a Nuxt app (an intranet, small company app) that wUButton showing over sticky headerI have a table and one of the columns is filled with Nuxt UI buttons. I have a sticky header for thiPinia as a layerHi, I’m learning pinia, and I like it so much I thought it should be a layer. Does it makes sense? IFetchError typeI've seen `import type { FetchError } from 'ofetch'`, what what's the correct module when handling `How to import functions in a .vue component from a .js file?import { myfunctions} from "/js/stats.js" doesnt work for me: Error 500 __vite_ssr_import_7__.defauskeleton does not work on dynamic routesguys, can anyone help me? the skeleton is appearing on the main page but on the page where the produhow to generate static HTML pages just for some of the routesI'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only seUDashboardPanel footer (@nuxt/ui-pro)I'm trying to put a footer on the main (`grow` enabled) panel but I can't get the css right. in the useRuntimeConfig() is returning undefined valuesIn my `.env` file I have something like this: ``` NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.co@nuxt/eslint autofix?when using `@nuxt/eslint` instead of the old `@nuxtjs/eslint-module` how does one enable autofix? `Check whether any page has fully mounted from the root App.vueSome of my pages have a ```ts definePageMeta({ hideSidebar: true }) ``` which sets the `hideSidebarGetting error "Component is already mounted" when using "useFetch()" and changing route.I am getting the error in my console: ``` [nuxt] [useFetch] Component is already mounted, please uHelp with postinstall: sh: nuxt: not foundHello, I need help with a concern I have regarding the `postinstall` script that runs `nuxt prepare`Types errors in Storybook and tests after upgrade nuxt to 3.11.0Hello there! I upgrade the nuxt version from 3.9.0 to 3.11.0, but now when I run `npm run tsc` I geNuxt eslint module helpI'm joining a new nuxt project that have vue3 eslint plugin, does the Nuxt Eslint Module replace the