framework icon indicating copy to clipboard operation
framework copied to clipboard

Improve custom routes docs

Open pi0 opened this issue 3 years ago • 1 comments

It is possible to add custom routes in multiple ways with Nuxt 3 but docs could be improved. (Routing or pages directory)

Ref: https://github.com/nuxt/framework/discussions/7211?converting=1#discussioncomment-3545577

pi0 avatar Sep 04 '22 06:09 pi0

is it possible to define subdomain with wildcard using new router.options.ts or pages:extend hook?

  1. router options gives me error
  at <RouterView name=undefined route=undefined >
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'replace')
    at interpolatePath (C:/Work/xxx/Website/Code/xxx/Frontend/node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/pages/runtime/utils.mjs:4:21)
    at Module.generateRouteKey (C:/Work/xxx/Website/Code/xxx/Frontend/node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/pages/runtime/utils.mjs:8:73)
    at default (C:/Work/xxx/Website/Code/xxx/Frontend/node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/pages/runtime/page.mjs:47:45)
    at C:\Work\xxx\Website\Code\xxx\Frontend\node_modules\.pnpm\@[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:4166:35
    at renderFnWithContext (C:\Work\xxx\Website\Code\xxx\Frontend\node_modules\.pnpm\@[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:842:21)
    at normalizeSlot (file:///C:/Work/xxx/Website/Code/xxx/Frontend/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-router/dist/vue-router.mjs:2455:25)
    at Proxy.<anonymous> (file:///C:/Work/xxx/Website/Code/xxx/Frontend/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-router/dist/vue-router.mjs:2447:13)
    at renderComponentRoot (C:\Work\xxx\Website\Code\xxx\Frontend\node_modules\.pnpm\@[email protected]\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:885:44)
    at renderComponentSubTree (C:\Work\xxx\Website\Code\xxx\Frontend\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:263:51)       
    at renderComponentVNode (C:\Work\xxx\Website\Code\xxx\Frontend\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:188:16)```

while using this code router.options.ts:

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

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterOptions>{
  routes: (_routes) => [
    // console.log(_routes),
    {
      name: 'home',
      route: '/*/',
      component: () => import('~/pages/user.vue'),
    },
  ],
}
  1. pages:extend simply ignores this route and goes straight to index.vue nuxt.config.ts:
  hooks: {
    'pages:extend'(pages) {
      pages.push({
        name: 'site.about',
        path: '/*/',
        file: '~/pages/user.vue',
      })
    },
  },

tasiotas avatar Sep 16 '22 16:09 tasiotas