Config alias theme to extends

[pi0]

It is more semantic to have single theme for when extending a theme layer. In addition, we can have an object shortcut syntax to provide layer options. (Depends on #24))

From:

export default defineNuxtConfig({ 
  extends: 'docus',
  // https://github.com/unjs/c12/issues/9
  extends: { from: 'docus', override: { featureFlag: true } }
}

To:

export default defineNuxtConfig({ 
  theme: 'docus',
  theme: [docus, { featureFlag: true }]
}

---

Q: What about theme configuration? It goes under app namespace as a runtime config: (or better app/theme.config file #14330)

export default defineNuxtConfig({ 
  app: {
    theme: { }
  }
}

[Atinux]

I think I would love to see:

export default defineNuxtConfig({
  theme: 'docus'
})

With a theme.config.ts (I don't think having it inside app would be needed for simplicity).

I am not found of the array syntax personally (the module ecosystem proves that the community prefer to level option in the nuxt.config)

[pi0]

Feature flags are for (build time -- same as nuxt config) theme/extends layer customization. Like disabling a module that the layer has or adding page prefix (#13367)

I am not fond of the array syntax personally (the module ecosystem proves that the community prefer to level option in the nuxt.config)

I'm also advocating for explicit key for modules but it can be much straight forward to override them like this instead of more verbose { from: 'docus', overrides: {} } syntax.

[Tahul]

This is an excellent idea! :)

Also, I really like the idea of being able to overwrite some parts of the extended layer before it gets merged.

That would be especially useful for things that are dependent on ordering like modules for instance.

[sawden]

I took a closer look at the extends feature over the past few days and found that it is currently not possible to switch between the different versions during the runtime, as only a final version of the app is being built.

This means for the scenario described here, that a separate version of the app has to be deployed for each "theme".

Could we implement switching between themes at runtime?
My suggestion would be to add a theme switch to the <NuxtPage /> component.

defineNuxtConfig({
   extends: [
      './base',
      {
            path: './themeB',
            name: 'theme-b'
       },
      {
            path: './themeC',
            name: 'theme-c'
       }
   ]
})

<template>
    <NuxtPage extendsName="theme-b" />
</template>

This would take themes to the nuxt level 😉.
I open to any feedback and would try to implement the feature if desired.

[pi0]

Thanks for your feedback and ideas @sawden. Extends (and Theme alias) are built-time features coming with their cons and pros (Pro: not everything is possible to be changed on runtime and tree-shaked build time gives it. Con: Cannot change theme variants at runtime)

I think this definitely worth to discuss more about runtime themeing (Now we have app.config could enable this too!)