Config alias `theme` to `extends`

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 https://github.com/nuxt/framework/issues/5918)

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

[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!)

[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.