\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_",[2014,2017],{"name":2015,"color":2016},"3.x","29bc7f",{"name":2018,"color":2019},"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.62021935,{"labels":2026,"number":2029,"owner":1991,"repository":1991,"state":2006,"title":2030,"updated_at":2031,"url":2032,"score":2033},[2027,2028],{"name":2000,"color":2001},{"name":2003,"color":2004},7879,"Multiple Layout Directories","2023-07-06T11:06:10Z","https://github.com/nuxt/nuxt/issues/7879",0.6279006,{"description":2035,"labels":2036,"number":2040,"owner":1991,"repository":1991,"state":2006,"title":2041,"updated_at":2042,"url":2043,"score":2044},"### 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.",[2037,2038,2039],{"name":2000,"color":2001},{"name":2015,"color":2016},{"name":2003,"color":2004},11497,"Feature request: Ability to ignore whole directories inside `pages`","2025-01-06T11:25:47Z","https://github.com/nuxt/nuxt/issues/11497",0.63346225,{"description":2046,"labels":2047,"number":2049,"owner":1991,"repository":1991,"state":2006,"title":2050,"updated_at":2051,"url":2052,"score":2053},"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>",[2048],{"name":2003,"color":2004},920,"Can I override Nuxt.js' default directory structure?","2023-01-18T15:39:56Z","https://github.com/nuxt/nuxt/issues/920",0.6422765,{"description":2055,"labels":2056,"number":2059,"owner":1991,"repository":1991,"state":2006,"title":2060,"updated_at":2061,"url":2062,"score":2063},"### Describe the feature\r\n\r\nNuxt routing using folders is a nightmare for complex routes.\r\nCan I suggest a way to generate our custom router file without using the pages:extend hook?\r\n\r\nThe option to define a custom route in router.options.ts is also not good because Nuxt will not extend any new routes you return from the routes function with metadata defined in definePageMeta.\r\n\r\nWe should be able to choose to use a pre-generated routes with page directories or use our own custom rules routing file. With your own custom routing files we could be able to use everything from vue router like regex for matching route.\r\n\r\nThank you.\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2057,2058],{"name":2000,"color":2001},{"name":2015,"color":2016},25386,"Add a way to use our own custom routes without folder structure","2024-01-26T10:26:59Z","https://github.com/nuxt/nuxt/issues/25386",0.6513354,{"description":2065,"labels":2066,"number":2067,"owner":1991,"repository":1991,"state":2006,"title":2068,"updated_at":2069,"url":2070,"score":2071},"thanks",[],18799,"Are there any subFolders in nuxt3? How to configure them?","2023-02-06T09:27:51Z","https://github.com/nuxt/nuxt/issues/18799",0.6550375,{"description":2073,"labels":2074,"number":2077,"owner":1991,"repository":1991,"state":2006,"title":2078,"updated_at":2079,"url":2080,"score":2081},"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.",[2075,2076],{"name":1985,"color":1986},{"name":2018,"color":2019},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.6562645,{"description":2083,"labels":2084,"number":2086,"owner":1991,"repository":1991,"state":2006,"title":2087,"updated_at":2088,"url":2089,"score":2090},"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>",[2085],{"name":2003,"color":2004},2522,"Importing pages from another module","2023-01-18T16:02:15Z","https://github.com/nuxt/nuxt/issues/2522",0.6585518,["Reactive",2092],{},["Set"],["ShallowReactive",2095],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"5VifXRzeka9nS554dorr0p4-S0wIf3fLLLwNeeU7xFU":-1},"/nuxt/nuxt/25152"]