Nuxt.js: How to dynamic switch theme

[bimohxh]

I have a need, I want to create a company offical site, different company has different theme, and when visit one company page, I must specify the compnay id, and get the theme by the id from api (async), then render different UI component by different theme.

for example I visit http://xxxx?company=1 will render the red theme and I visit http://xxxx?company=2 will render the blue theme

so I struct the project like:

  -red
      index.vue
  -blue
      index.vue

but the result is nuxt always root the view page to pages can't specify a rule, so how can I realize this?

_{This question is available on Nuxt.js community (#c1767)}

[dotneet]

@bimohxh I think layout property can be used to achieve it.
layout property can be set a function and it receives context property.
https://nuxtjs.org/api/pages-layout#the-layout-property

[bimohxh]

@dotneet thnaks, but I need different page vue, not layout

[Atinux]

For your case, I suggest you to have only one pages/index.vue which render different component based on $route.query.company

[bimohxh]

@Atinux I have think this, but nuxt dynamic import component didn't support parameter, I write code like this

export default {
  asyncData ({query}) {
    let res = axios().get(`company/theme?id=xxx`)
    return {
      theme: res.data
    }
  },
  components: {
    Logo,
    News: () => import(`~/components/templates/${this.theme}/news.vue`)
  }
}

[Atinux]

@bimohxh you need to use beforeCreate hook for using this, see https://github.com/nuxt/nuxt.js/blob/dev/examples/async-component-injection/pages/_slug.vue#L16

export default {
  asyncData ({query}) {
    let res = axios().get(`company/theme?id=xxx`)
    return {
      theme: res.data
    }
  },
  beforeCreate () {
    this.News = () => import(`~/components/templates/${this.theme}/news.vue`)
  },
  components: {
    Logo
  }
}

[bimohxh]

@Atinux You are a great man, nuxt is a great framework

[Atinux]

Thank you :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.