Nuxt•4mo ago

Using Layers for different UI frontends

I want to use layers to create 3 apps that function basically the same but with 3 different colour schemes and some different name branding. What would be the best way to go about that using nuxt 3 and layers?

14 Replies

kapa.ai•4mo ago

Hi @tb13. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create three Nuxt 3 apps with the same core functionality but different color schemes and branding, Nuxt Layers are an excellent fit. Here’s a recommended approach based on the official documentation and examples: 1. Create a Base Layer - Set up a base Nuxt layer containing all shared logic, components, pages, and configuration. - This base layer acts as the foundation for all three apps. Example structure:

/base
  /components
  /pages
  nuxt.config.ts
  app.config.ts

/base
  /components
  /pages
  nuxt.config.ts
  app.config.ts

2. Create App-Specific Layers - For each app, create a new Nuxt project that extends the base layer. - In each app, override only what’s different: color scheme, branding, and any unique components or pages. Example nuxt.config.ts for an app:

export default defineNuxtConfig({
  extends: ['./base'], // Path to your base layer
})

export default defineNuxtConfig({
  extends: ['./base'], // Path to your base layer
})

See example in the docs 3. Customize Color Schemes and Branding - Use the app.config.ts in each app to define unique color aliases and branding. - If you use Nuxt UI, you can set color aliases like this:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'indigo',
      secondary: 'pink',
      // ...other colors
    }
  },
  brand: {
    name: 'App One'
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'indigo',
      secondary: 'pink',
      // ...other colors
    }
  },
  brand: {
    name: 'App One'
  }
})

See Nuxt UI theming - You can also override global CSS or Tailwind config per app as needed. 4. Override Components or Pages as Needed - If a specific app needs a different version of a component or page, place a file with the same name in the app’s directory. Nuxt will use the app’s version instead of the base layer’s version. - This allows for easy customization while sharing most of the codebase. 5. Directory Example

/base
  /components
  /pages
  nuxt.config.ts
  app.config.ts
/app-one
  /components (only overrides)
  /pages (only overrides)
  nuxt.config.ts (extends ../base)
  app.config.ts (custom colors/branding)
/app-two
  ...
/app-three
  ...

/base
  /components
  /pages
  nuxt.config.ts
  app.config.ts
/app-one
  /components (only overrides)
  /pages (only overrides)
  nuxt.config.ts (extends ../base)
  app.config.ts (custom colors/branding)
/app-two
  ...
/app-three
  ...

6. Run and Build Each App Separately - Each app is a separate Nuxt project that extends the base layer, so you can build and deploy them independently. --- Summary:
Use a base layer for shared logic, and create separate Nuxt projects for each frontend, extending the base and overriding only what’s necessary (like color schemes and branding) via app.config.ts and custom components or pages. This approach is well-supported and recommended in the Nuxt documentation for layers and theming Authoring Nuxt Layers, Nuxt UI Theming, and Layer Usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1103319221309546527> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tb13OP•4mo ago

@kapa.ai can you give specific examples how you would extend tailwind css with different base colors for three apps. Let's say green blue and orange, NOT using @nuxt/ui?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! Here’s how you can extend Tailwind CSS base colors for three Nuxt 3 apps (e.g., green, blue, and orange) using Nuxt Layers and Nuxt UI’s theming system: --- 1. Base Layer Setup Your base layer (/base) contains shared components, pages, and the default Tailwind/Nuxt UI setup. base/app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@import "tailwindcss";
@import "@nuxt/ui";

--- 2. App-Specific Color Customization For each app, you override the primary color in app.config.ts: #### App One (Green) app-one/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green'
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green'
    }
  }
})

#### App Two (Blue) app-two/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue'
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue'
    }
  }
})

#### App Three (Orange) app-three/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'orange'
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'orange'
    }
  }
})

You can use any color from the Tailwind palette as the value for primary (Nuxt UI Theme docs). --- 3. How It Works - Each app extends the base layer and only overrides the color configuration. - The primary color alias is used throughout your components (e.g., text-primary, bg-primary), and will resolve to green, blue, or orange depending on the app. - No need to manually edit Tailwind config files; Nuxt UI handles the color aliasing via app.config.ts (Nuxt UI Theme docs). --- 4. Example Usage in a Component

<template>
  <UButton color="primary">Click me</UButton>
</template>

<template>
  <UButton color="primary">Click me</UButton>
</template>

This button will be green, blue, or orange depending on the app’s primary color setting. --- References:
- Nuxt UI Theme Configuration - Authoring Nuxt Layers If you need to further customize shades or add more color aliases, you can extend the colors object in app.config.ts as shown in the docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1103319221309546527> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tb13OP•4mo ago

@kapa.ai can you do that without using @nuxt/ui, JUST plain tailwindcsss

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not contain explicit instructions or examples for configuring different Tailwind CSS base colors for multiple Nuxt 3 apps using only plain Tailwind CSS (without Nuxt UI). The available documentation focuses on theming and color customization through Nuxt UI and its configuration system, not on direct Tailwind CSS configuration in a multi-layer Nuxt setup. If you need to use only Tailwind CSS, you would typically customize the tailwind.config.ts file in each app, but this approach is not covered in the provided sources. Therefore, I cannot provide a confident, source-backed answer for this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1103319221309546527> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tb13OP•4mo ago

@kapa.ai can you extend tailwind.config.ts?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly mention extending tailwind.config.ts in the context of Nuxt 3 or Nuxt Layers. The provided documentation focuses on theming and color customization using CSS variables, the @theme directive, and configuration through app.config.ts or Nuxt UI, rather than direct extension or inheritance of tailwind.config.ts files between layers or projects. If you are using Nuxt UI, theming is handled via CSS variables and the app.config.ts file, not by extending tailwind.config.ts directly. For example, you can customize colors and design tokens using the @theme directive in your CSS and the ui.colors key in app.config.ts or vite.config.ts as shown in the documentation, but there is no mention of extending or composing multiple tailwind.config.ts files across layers Getting-started Theme. Therefore, I'm sorry, but there's no information in the knowledge sources about extending tailwind.config.ts in Nuxt 3 or with Nuxt Layers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1103319221309546527> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tb13OP•4mo ago

@kapa.ai what about plain css without tailwind?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can use plain CSS without Tailwind in Nuxt 3. Nuxt is highly flexible with styling and allows you to write your own styles or reference local and external stylesheets. You can place your CSS files in the assets/ directory and import them globally via the css property in your nuxt.config.ts, or import them directly in your components, pages, or layouts. Example: Importing a global CSS file

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

Example: Importing CSS in a component

<script>
import '~/assets/css/first.css'
</script>

<style>
@import url("~/assets/css/second.css");
</style>

<script>
import '~/assets/css/first.css'
</script>

<style>
@import url("~/assets/css/second.css");
</style>

This approach works for any plain CSS, and you can organize your styles as needed for different apps or layers. You can also use CSS preprocessors or reference stylesheets distributed through npm if desired. Nuxt will inline these styles in the rendered HTML and inject them globally or locally as appropriate Styling in Nuxt. If you want to use different color schemes for different apps, you can create separate CSS files for each app and import the appropriate one in each app’s configuration or entry point. The knowledge sources do not provide specific examples for using plain CSS with Nuxt Layers, but the general approach for using plain CSS in Nuxt is well documented. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1103319221309546527> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Using Layers for different UI frontends

Did you find this page helpful?