CODEWITHSUNDEEP
vue.jsnuxt.js
Giffary
Giffary

Reputation: 3128

Nuxt dynamic layout base on domain name?

I'm planning to develop white label project using nuxtJS (Universal Mode). My idea is when user come to the nuxtJS using difference domain, it will display difference layout.

For example, if user A access www.aaa.com --> with show layout on layouts/aaa/default.vue path

if user A access www.bbb.com --> with show layout on layouts/bbb/default.vue path

anyone has an idea or an example how to handle this?

Regards.

Upvotes: 2

Views: 1177

Answers (1)

Nick Dawes
Nick Dawes

Reputation: 2244

Sounds like a strange setup, but if you're sure it's what you want; you could set up a middleware to check the origin of the request and return a value that can be used to determine the layout in your page files.

myMiddleware.js

export default function({ req, redirect }) {
  let host = req.get('host');
  if (host.includes('aaa')) {
    return 'aaaLayout.vue'
  } else if (host.includes('bbb') {
    return 'bbbLayout.vue'
  }
}

Then in your pages:

import middleware from '@/middleware/myMiddleware'
...
layout: middleware

May need tweaking to suit your exact needs, but something like that would work.

Upvotes: 2

Related Questions