navigateTo named route parameter example
Example: await navigateTo({ name: 'product', params: { id: 1 } }) - redirects to the 'product' route while passing an id parameter.
utils/navigateto
19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
navigateTo external URL with external flag example
Example: await navigateTo('https://nuxt.com', { external: true }) - will redirect successfully with the external parameter set to true.
navigateTo open in new tab example
Example: await navigateTo('https://nuxt.com', { open: { target: '_blank', windowFeatures: { width: 500, height: 500 } } }) - opens the URL in a new tab with specified window dimensions.
navigateTo function signature and return type
navigateTo is a utility function with the signature: export function navigateTo(to: RouteLocationRaw | undefined | null, options?: NavigateToOptions): Promise<void | NavigationFailure | false> | false | void | RouteLocationRaw. It is available on both server side and client side within the Nuxt context.
navigateTo must be awaited or returned
Always use await or return on the result of navigateTo when calling it to ensure proper execution flow.
navigateTo in route middleware must be returned
When using navigateTo within route middleware, you must return its result to ensure the middleware execution flow works correctly. Calling navigateTo without returning it will not work as expected and may lead to unexpected behavior.
navigateTo cannot be used in Nitro routes
navigateTo cannot be used within Nitro routes. To perform a server-side redirect in Nitro routes, use sendRedirect from h3 instead.
navigateTo 'to' parameter
The 'to' parameter accepts type RouteLocationRaw | undefined | null with default value '/'. It can be a plain string (e.g., '/blog') or a route object (e.g., { name: 'blog' } or { name: 'product', params: { id: 1 } }). When passed as undefined or null, it defaults to '/'.
navigateTo options interface
navigateTo accepts NavigateToOptions with the following properties: replace (boolean, default false), redirectCode (number, default 302), external (boolean, default false), open (OpenOptions object).
navigateTo 'replace' option
The replace option is a boolean with default value false. By default, navigateTo pushes the given route into the Vue Router's instance on the client side. Setting replace to true indicates the route should be replaced instead.
navigateTo 'redirectCode' option
The redirectCode option is a number with default value 302. navigateTo redirects to the given path and sets the redirect code to 302 Found by default when redirection takes place on the server side. This can be modified by providing a different redirectCode, such as 301 Moved Permanently for permanent redirections.
navigateTo 'external' option behavior
The external option is a boolean with default value false. Without external: true, internal URLs navigate as expected but external URLs throw an error. With external: true, internal URLs navigate with a full-page reload and external URLs navigate as expected.
navigateTo 'open' option
The open option is of type OpenOptions and allows navigating to the URL using the window.open() method. This option is only applicable on the client side and is ignored on the server side. It contains target (string, default '_blank') and windowFeatures (OpenWindowFeatures object).
navigateTo open windowFeatures properties
The windowFeatures object accepts the following properties: popup (boolean) requests a minimal popup window instead of a new tab; width or innerWidth (number, minimum 100 pixels) specifies content area width including scrollbars; height or innerHeight (number, minimum 100 pixels) specifies content area height including scrollbars; left or screenX (number) sets horizontal position relative to left edge of screen; top or screenY (number) sets vertical position relative to top edge of screen; noopener (boolean) prevents new window from accessing originating window via window.opener; noreferrer (boolean) prevents Referer header and implicitly enables noopener.
navigateTo basic string navigation example
Example: await navigateTo('/search') - passing 'to' as a string.
navigateTo route object navigation example
Example: await navigateTo({ path: '/search' }) - passing 'to' as a route object.
navigateTo with query parameters example
Example: await navigateTo({ path: '/search', query: { page: 1, sort: 'asc' } }) - route object with query parameters.
navigateTo in route middleware with redirectCode example
Example in route middleware: export default defineNuxtRouteMiddleware((to, from) => { if (to.path !== '/search') { return navigateTo('/search', { redirectCode: 301 }) } }). The result must be returned to work correctly.
navigateTo external URL error example
Example: await navigateTo('https://nuxt.com') - will throw an error because navigating to an external URL is not allowed by default.