I'm trying to implement subdomain routing in Nuxt. This is what I need to do:
/pages/username/index.vue:
username1.mydomain.com (this page should display "hello, i am username1")
username2.mydomain.com (this page should display "hello, i am username2")
username3.mydomain.com (this page should display "hello, i am username3")
username4.mydomain.com (this page should display "hello, i am username4")
and so on
/pages/username/content.vue
username1.mydomain.com/content (this page should display "content by username1")
username2.mydomain.com/content (this page should display "content by username2")
username3.mydomain.com/content (this page should display "content by username3")
username4.mydomain.com/content (this page should display "content by username4")
and so on
I found this link (have yet to make it work) but it uses @Nuxtjs/router to (i think) override vue-router - wondering if there's a better way, I really like nuxt's ability to "create a page and you dont need to define the route" approach. Is there a way to do this in nuxt, ideally without vue-router, keeping the nuxt default page / routing behavior?
// router.js
import Router from 'vue-router'
export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
const options = routerOptions || createDefaultRouter(ssrContext).options
let routesDirectory = null
if (process.server && ssrContext && ssrContext.nuxt && ssrContext.req) {
const req = ssrContext.req
const domainLevel = (req.headers.host.match(/\./g) || []).length + 1
// Get routes directory by hostname
routesDirectory = domainLevel > 2 ? 'sub-domain' : 'root-domain'
// Save to the object that will be sent to the client as inline-script
ssrContext.nuxt.routesDirectory = routesDirectory
}
if (process.client) {
// Get what we saved on SSR
if (window.__NUXT__ && window.__NUXT__.routesDirectory) {
routesDirectory = window.__NUXT__.routesDirectory
}
}
function isUnderDirectory(route, directory) {
const path = route.path
return path === '/' + directory || path.startsWith('/' + directory + '/')
}
let newRoutes = options.routes
if (routesDirectory) {
newRoutes = options.routes
.filter((route) => {
// remove routes from other directories
const toRemove =
routesDirectory === 'sub-domain'
? 'root-domain'
: 'sub-domain'
return !isUnderDirectory(route, toRemove)
})
.map((route) => {
// remove directory from path and name
if (isUnderDirectory(route, routesDirectory)) {
return {
...route,
path: route.path.substr(routesDirectory.length + 1) || '/',
name: route.name.substr(routesDirectory.length + 1) || 'index'
}
}
return route
})
}
return new Router({
...options,
routes: newRoutes
})
}
https://github.com/nuxt-community/router-module/issues/22#issuecomment-628313757
If you have a predetermined list of usernames, this module ' k-domains ' can help you.
Here is an example :
export default {
buildModules: [
[ "k-domains", {
subDomains: ["username1", "username2", "username3" ], // List of directories to hold te pages for your subdomains
rootDomain: "main-domain" // directory to hold the pages for root domain
}
],
["@nuxtjs/router",{
keepDefaultRouter: true // this line is mandatory...
}
]
]
}
with a file tree like:
|
|─pages
| ├───username1
| ├───username2
| ├───username3
| └───main-domain
Answered in: https://stackoverflow.com/a/65813846/3739410
But if your usernames cannot be predicted, you should use the router to handle the subdomain, as showed here: https://levelup.gitconnected.com/managing-wildcard-subdomains-with-vue-router-9fd74518f2f5
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.