\r\n \u003C/NuxtLayout>\r\n\u003C/template>\r\n```\r\nChange the pages directory to something else in `nuxt.config.ts`.\r\n```ts\r\n// https://nuxt.com/docs/api/configuration/nuxt-config\r\nexport default defineNuxtConfig({\r\n dir: {\r\n pages: \"routes\"\r\n }\r\n});\r\n```\r\nMake sure to not have anything in the pages directory.\n\n### Describe the bug\n\nNuxt throws info message `Create a Vue component in the pages/ directory to enable \u003CNuxtPage>` instead of `Create a Vue component in the (pages dir)/ directory to enable \u003CNuxtPage>`.\n\n### Additional context\n\nLiterally no one cares, but I get annoyed by anything.\n\n### Logs\n\n_No response_",[2926,2929],{"name":2927,"color":2928},"3.x","29bc7f",{"name":2930,"color":2931},"pending triage","E99695",20064,"\u003CNuxtPage> info message does not take custom pages dir into account","2023-04-04T13:18:31Z","https://github.com/nuxt/nuxt/issues/20064",0.6303241,{"description":2938,"labels":2939,"number":2941,"owner":2908,"repository":2908,"state":2909,"title":2942,"updated_at":2943,"url":2944,"score":2945},"Hi, I'm wondering if I could do something like moving the pages and components directory from\r\n```\r\n/\r\n```\r\nto \r\n```\r\n/src\r\n```\r\n\r\nFrom Nuxt.js' source code /lib/webpack/base.config.js file, I saw these directories are defined in the webpack alias.\r\nSo in nuxt.config.js file in my project, I override these alias like:\r\n```javascript\r\nvar projectSrc = path.join(__dirname, 'src')\r\n\r\nmodule.exports = {\r\n extend(config, ctx) {\r\n // Override\r\n config.resolve.alias['~'] = path.join(projectSrc)\r\n config.resolve.alias['~assets'] = path.join(projectSrc, 'assets')\r\n config.resolve.alias['~components'] = path.join(projectSrc, 'components')\r\n config.resolve.alias['~middleware'] = path.join(projectSrc, 'middleware')\r\n config.resolve.alias['~pages'] = path.join(projectSrc, 'pages')\r\n config.resolve.alias['~plugins'] = path.join(projectSrc, 'plugins')\r\n }\r\n}\r\n```\r\n\r\nBut I got this error while trying to run npm run dev:\r\n```\r\nCouldn't find a `pages` directory. Please create one under the project root\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c788\">#c788\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2940],{"name":2905,"color":2906},920,"Can I override Nuxt.js' default directory structure?","2023-01-18T15:39:56Z","https://github.com/nuxt/nuxt/issues/920",0.640153,{"description":2947,"labels":2948,"number":2952,"owner":2908,"repository":2908,"state":2909,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Is your feature request related to a problem? Please describe.\r\nI have a detail page with a lot of information visualized in unique ways that only make sense to that page.\r\nBecause my `components` folder gets used for re-usable components, I have a subfolder in the same folder that route is located.\r\n\r\nMy `pages` folder looks a little something like this:\r\n```\r\nroutes\r\n- route-1\r\n - index.vue\r\n - -components\r\n - SomeComponentUniqueToThisRoute.vue\r\n - AnotherComponentUniqueToThisRoute.vue\r\n- route-2\r\n - index.vue\r\n - -components\r\n - SomeComponentUniqueToThisRoute.vue\r\n - AnotherComponentUniqueToThisRoute.vue\r\n .....\r\n```\r\n\r\nif I now go to `/route-2/-components/SomeComponentUniqueToThisRoute` it loads that component, obviously, because Nuxt thinks it's a page.\r\n\r\nIn the [documentation](https://nuxtjs.org/docs/2.x/directory-structure/pages#ignoring-pages) it says that I can already hide components by prefixing them with a `-`. But sadly this does not work on folders atm.\r\n\r\n### Describe the solution you'd like\r\nI want nuxt to **not** generate routes from `.vue` files in folders prefixed with a `-` by default, without the help of [.nuxtignore](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ignore). Exactly like it already does for components.\r\n\r\nAll sub-folders and their .vue files should not be turned in to pages as well.\r\n\r\n### Describe alternatives you've considered\r\nHaving all components in my `-components` folder starting with a `-` would do the trick, but that is ugly and breaks vue's naming conventions.\r\n\r\nI could also write a couple of `.nuxtignore` rules that exclude the folders, but my application has many (around 25) -components folders that I would have to exclude. It is also another thing I have to explain to people who help me with this project, which isn't ideal.",[2949,2950,2951],{"name":2902,"color":2903},{"name":2927,"color":2928},{"name":2905,"color":2906},11497,"Feature request: Ability to ignore whole directories inside `pages`","2025-01-06T11:25:47Z","https://github.com/nuxt/nuxt/issues/11497",0.64146143,{"description":2958,"labels":2959,"number":2962,"owner":2908,"repository":2908,"state":2909,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### Describe the feature\n\nIn Nuxt 2, path of built-in dirs can be configured by `dir` option.\r\nHowever, when I switched to Nuxt 3, I figured out that this configuration no longer working:\r\n```js\r\ndir: {\r\n assets: '../../assets',\r\n}\r\n```\r\nI'm using monorepo and I hope all nuxt apps can share a single assets folder.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2960,2961],{"name":2927,"color":2928},{"name":2930,"color":2931},20144,"Custom Dirs in Nuxt3?","2023-04-08T13:14:34Z","https://github.com/nuxt/nuxt/issues/20144",0.659315,{"description":2968,"labels":2969,"number":2971,"owner":2908,"repository":2908,"state":2909,"title":2972,"updated_at":2973,"url":2974,"score":2975},"I'm building an app with Nuxt and would like to separate out some of the pages into another folder. Effectively, I'd like to combine 2 or more sets of Nuxt files and combine them into a single app.\r\n\r\nHere's the folder structure I'm trying:\r\n```\r\napp\r\n└─ packages\r\n ├─ main\r\n │ ├─ assets\r\n │ ├─ components\r\n │ ├─ pages\r\n │ ├─ store\r\n │ ├─ (other nuxt folders...)\r\n │ └─ nuxt.config.js\r\n └─ plugin-a\r\n ├─ assets\r\n ├─ components\r\n ├─ (other nuxt folders...)\r\n ├─ index.js\r\n └─ nuxt.config.js\r\n```\r\n\r\nI'm using the express-template for the main package and the starter-template for the plugin-a package. The index.js in plugin-a creates and builds a Nuxt instance, then exports it. server/index.js in main will then import this Nuxt instance and set up an express route to render it.\r\n\r\nHere's the code:\r\n\r\nplugin-a/index.js\r\n```javascript\r\nconst { Nuxt, Builder } = require('nuxt')\r\n\r\nconst nuxtConfig = require('./nuxt.config')\r\nnuxtConfig.dev = !(process.env.NODE_ENV === 'production')\r\n\r\n// Init Nuxt.js\r\nconst nuxt = new Nuxt(nuxtConfig)\r\n\r\n// Build only in dev mode\r\nif (nuxtConfig.dev) {\r\n new Builder(nuxt).build()\r\n}\r\n\r\nmodule.exports = nuxt\r\n```\r\n\r\nmain/server/index.js\r\n```javascript\r\nimport express from 'express'\r\nimport { Nuxt, Builder } from 'nuxt'\r\nimport pluginA from 'plugin-a' // import the plugin nuxt instance\r\n\r\nimport api from './api'\r\n\r\nconst app = express()\r\nconst host = process.env.HOST || '127.0.0.1'\r\nconst port = process.env.PORT || 3000\r\n\r\napp.set('port', port)\r\n\r\n// Import API Routes\r\napp.use('/api', api)\r\n\r\n// Import and Set Nuxt.js options\r\nlet config = require('../nuxt.config.js')\r\nconfig.dev = !(process.env.NODE_ENV === 'production')\r\n\r\n// Init Nuxt.js\r\nconst nuxt = new Nuxt(config)\r\n\r\n// Build only in dev mode\r\nif (config.dev) {\r\n new Builder(nuxt).build()\r\n}\r\n\r\n// Give nuxt middleware to express\r\napp.use('/main', nuxt.render)\r\napp.use('/plugina', pluginA.render) // render the plugin\r\n\r\n// Listen the server\r\napp.listen(port, host)\r\nconsole.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console\r\n```\r\n\r\nThe problem is Nuxt.render only seems to use the files in the current directory, so both /main and /plugina show the pages from the main package. Alternatively, if I try calling ```new Builder(pluginA).build()``` in main/server/index.js I get unexpected token errors in .nuxt/client.js (I assume Nuxt doesn't like ```Builder.build``` being called more than once).\r\n\r\nI'm pretty stuck at this point and I don't see any way to approach this, aside from rolling my own Vue SSR implementation to handle this.\r\n\r\nIf anyone has any ideas about how to split up a Nuxt app like this that they could share, I'd very much appreciate it.\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2191\">#c2191\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2970],{"name":2905,"color":2906},2522,"Importing pages from another module","2023-01-18T16:02:15Z","https://github.com/nuxt/nuxt/issues/2522",0.65951806,{"description":2977,"labels":2978,"number":2983,"owner":2908,"repository":2908,"state":2909,"title":2984,"updated_at":2985,"url":2986,"score":2987},"In Nuxt 3, official template examples (as seen on Nuxt Official Templates) often place the app/ directory at the root of the project (assuming the root directory is named project-root). This structure allows for automatic recognition and importing of components and pages located within the app/ directory without needing to specify additional configurations such as srcDir or dir in the nuxt.config.ts.\n`\nproject-root/\n├── app/ \n│ ├── assets/ \n│ ├── plugins/ \n│ ├── pages/ \n│ │ └── login.vue\n│ ├── components/ \n│ ├── layouts/ \n│ └── composables/\n├── nuxt.config.ts \n├── server/\n└── package.json\n`\nHow It Works\nIn this setup, Nuxt 3 automatically recognizes and processes files under the app/ directory. Specifically:\n\nPages: Files within app/pages/ are automatically mapped to routes. For example, app/pages/login.vue corresponds to the /login route.\nComponents: Components placed in app/components/ can be auto-imported into your Vue components without needing explicit imports.\nAutomatic Import Without Configuration\nNuxt 3 achieves this automatic import functionality by defaulting to the app/ directory for locating pages, components, layouts, etc., without requiring any special configuration in nuxt.config.ts. Here’s how it works:\n\nDefault Directory Scanning: Nuxt 3 scans predefined directories like app/pages, app/components, and others by default. This means that placing your .vue files in these directories will automatically make them available as routes or components.\nConvention Over Configuration: This approach follows the \"convention over configuration\" principle, reducing the need for developers to manually configure paths or imports. As long as you adhere to the standard directory structure, Nuxt handles the rest.\nNo Need for srcDir or dir Settings: Since Nuxt 3 already knows to look inside the app/ directory for pages and components, there's no need to explicitly define srcDir or dir in nuxt.config.ts.\nExample Usage\nGiven the above directory structure, you can navigate to http://localhost:3000/login to access the login.vue component located at app/pages/login.vue. Similarly, components placed in app/components/ can be used directly in other components without needing to import them explicitly.\n\nConclusion\nThis feature simplifies project organization and reduces boilerplate code by leveraging a standardized directory structure. By following these conventions, Nuxt 3 ensures that your application remains modular and easy to manage without the need for extensive configuration. If you follow the recommended structure, Nuxt 3 will handle the routing and component registration automatically, allowing you to focus more on building your application logic rather than managing configurations.",[2979,2982],{"name":2980,"color":2981},"documentation","5319e7",{"name":2930,"color":2931},31282,"How to automatically import the newly created app directory in nuxt3 project","2025-03-08T10:41:01Z","https://github.com/nuxt/nuxt/issues/31282",0.6614206,{"description":2989,"labels":2990,"number":2993,"owner":2908,"repository":2908,"state":2909,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Environment\n\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.0.0-rc.11`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\n- Create a Nuxt module project:\r\n\r\n```\r\nnpx nuxi init -t module my-module\r\ncd my-module\r\nnpm i \r\nnpm run dev:prepare\r\n```\r\n\r\n- Make a call to `extendPages` within `module.ts` to add a page:\r\n\r\n```ts [module.ts]\r\nextendPages((pages) => {\r\n pages.push({\r\n name: 'module-page',\r\n path: '/:slug(.*)*',\r\n // @ts-ignore\r\n file: resolve(runtimeDir, './MyPage.vue')\r\n })\r\n})\r\n```\r\n- Add a page `~/src/runtime/MyPage.vue`:\r\n\r\n```vue [MyPage.vue]\r\n\u003Ctemplate>\r\n \u003Cdiv>Hello!\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n- Update `app.vue` to add `\u003CNuxtLayout>` and `\u003CNuxtPage>`:\r\n\r\n```vue [app.vue]\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n- Run the project with `npm run dev` and note that the page has not loaded:\r\n```\r\nPlugin by my-module!\r\n√ Vite server hmr 4 files in 50.259ms\r\n[Vue warn]: Failed to resolve component: NuxtPage\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\nPlugin by my-module!\r\n[Vue warn]: Component \u003CAnonymous> is missing template or render function.\r\n√ Vite server hmr 4 files in 143.147ms\r\n[Vue warn]: Failed to resolve component: NuxtPage\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\nPlugin by my-module!\r\n```\n\n### Describe the bug\n\nNuxt cleverly strips out all router functionality if a project does not have a pages directory. However, this functionality is still removed if an installed module calls 'extendPages', so modules can't actually provide pages unless the project itself already has some, which may not always be the case.\r\n\r\nI think router functionality should be preserved by Nuxt if `extendPages` is called.\r\n\n\n### Additional context\n\nI am creating a module which creates a catch all page so I can do my own routing. I don't want to need to create a page in every project in order for my module's page to take effect. I can imagine other modules will want to act similarly, even if they're only providing more specific routes/pages.\n\n### Logs\n\n_No response_",[2991,2992],{"name":2927,"color":2928},{"name":2930,"color":2931},15060,"Nuxt does not include router functionality when a module calls extendPages unless the project has its own pages directory","2023-01-19T17:44:18Z","https://github.com/nuxt/nuxt/issues/15060",0.6615751,{"description":2999,"labels":3000,"number":3009,"owner":2908,"repository":2908,"state":2909,"title":3010,"updated_at":3011,"url":3012,"score":3013},"### Describe the feature\n\nCurrently, the pages module has a very limited configuration option. It can be enabled/disabled and we can change the dir name. I would like to improve this to bring it on par with the configuration available for components and composables.\r\n\r\nExample: in the following directory structure I want to automatically load only Vue files (could be customizable with a glob pattern).\r\n```\r\npages\r\n somePage\r\n index.vue\r\n pageSpecificHelper.ts\r\n pageAsyncData.ts\r\n generated\r\n GQLGeneratedTypes.ts\r\n```\r\nCurrently, I have a couple of workarounds like adding `-` prefixes, or `ignore` config (though it affects all auto-imports).\r\n\r\nI would be happy to work on this myself. The idea I have would be to allow `pages` config to be an object with an option for `pattern` (or use the existing `ScanDir` interface for more configuration) and then change [this line in resolvePagesRoutes](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/pages/utils.ts#L38) with fallback to the current pattern.\r\n\r\n---\r\n\r\nMore broadly speaking, I imagine that a more consistent and granular configuration of auto-imports would benefit many bigger projects. But this would be a bigger change affecting components, composables, plugins, and pages configuration. \n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3001,3002,3003,3006],{"name":2902,"color":2903},{"name":2927,"color":2928},{"name":3004,"color":3005},"workaround available","11376d",{"name":3007,"color":3008},"❌ won't do","705B27",12333,"Improved pages module configuration","2024-11-28T05:07:59Z","https://github.com/nuxt/nuxt/issues/12333",0.6629891,["Reactive",3015],{},["Set"],["ShallowReactive",3018],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5VifXRzeka9nS554dorr0p4-S0wIf3fLLLwNeeU7xFU":-1},"/nuxt/nuxt/25152"]