Nuxt3 Custom Routing

Hi, I’m Lovefield.

Nowadays, most URL configurations can be configured using a folder structure. However, there has always been a limit to constructing URLs using folder structures in practice, where variables exist. This is because there are ambiguous things to create as a folder structure due to the nature of URL organization such as Pagination. In this article, I would like to briefly describe how to create a custom router in Nuxt3.

There are two main ways to set up a custom router. The first is to use the router option for nuxt.config.ts, and the second is to create the app/router.option.ts file. Personally, I prefer the second method. The first method is that there is more information to declare to the router than you think, and the code becomes messy because 'nuxt.config.ts' becomes complicated. Let's move on to the second method.

First create an app/router.option.ts file.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {

}

Basic file structure. You must get the type RouterConfig from @nuxt/shema . It also uses the method of handing over the configuration object to export default. When you create a file, Nuxt3 will automatically read it. The keys hashMode, history, and routes exist on this object. Among them, the key we need to use is routes.

The routes key is functional and must be written as follows.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes)=>{
    }
}

The _routes received as a factor are read-only and cannot be modified. _routes contains router values created in a folder structure in a RouteRecordRaw-type array. The return value must also return the RouteRecordRaw array. In other words, you just need to deliver the same information as the information you created. Note that passing the structure you created with the return value will cause the information you had to disappear. You must combine the _routes value with the information you want to set and pass it as a return value.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes)=>{
            const routeList = [..._routes];
	
            return routeList.concat([		
        ]);
    }
}

First, put the read-only state _routes into the array using the spread syntax. Now use the concat method in the array to configure the existing router list and the router options you want to add and forward them to the return value. The following values must be configured for the router options.

{
name: string;,
path: string;
component: Function / return vue file;
meta: pageMeta;
props: props;
}

name : The unique name of the page. The names of pages created by the existing folder structure are automatically generated in the "folder name-file name" structure. For example, the router page name in the file auth/login.vue consists of "auth-login". You can specify a separate name that does not overlap with the automatically generated unique name.

path : The path to be set by the router. If you set the /community/[boardtype]/[page] structure to the folder structure, write /community/:boardtype/:page in path.

component : This is the most important part. You must specify a vue file. You can use the following. () => import(“@/pages/community/list.vue”)

meta : It acts like definePageMeta used on the page. Even if definePageMeta is set in the vue file imported from the component section, it does not apply.

props : Specifies the value that defineprops can receive on the page.

The final code is as follows:

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes)=>{
        const routeList = [..._routes];

        return routeList.concat([
            {
                name: “community-list-page”,
                path: “/community/:boardType/:page”,
                component: ()=> import(“@/pages/community/list.vue”),
                meta: {
                    layout: “community”,
                    middleware: [“pc-required”]
                },
                props: {
                    someValue: “value”
                }
            }
        ]);
    }
}