The ThemeConfiguration component and setup for Nuxt3+ allows you to configure the theme settings for your application.

yarn add @limbo-works/theme-configuration

Make the component globally usable by extending the layer in `nuxt.config.js`.

export default defineNuxtConfig({
    extends: [
        '@limbo-works/theme-configuration',
        ...
    ],
    ...
});

<ThemeConfiguration
  :config="themeConfig"
  :media="{
	print: 'print',
  }"
  :use-theme-classes="true"
  css-layer="layer1"
>
  <!-- Your content here -->
</ThemeConfiguration>

Note that the component doesn't have to wrap your content and you should ever only have one on the page.

• config: The configuration object or key for the theme settings. Can be a string (matching ~/assets/js/theme-configuration.this-name.js) or an object.
• media: An object of key-value pairs where the key is the media query to use and the value is the config to use for this media query.
• useThemeClasses: Whether to use theme classes for styling. Can be a boolean or an array of theme class keys (again, matching ~/assets/js/theme-configuration.this-name.js). Will result in classes like .u-theme-default, .u-theme-this-name, etc..
• cssLayer: The CSS layer to apply the theme styles to. Can be a string.

• Default: The content to be rendered inside the ThemeConfiguration component.

• config: The observed data object for the theme configuration.

Other than the ThemeConfiguration component, the layer also introduce an async getThemeConfigurations() utility function to get all the available config files.

• The documentation needs expanding.