Nuxt•2mo ago

Symfony like environment

Hi everyone, I've set up an Nuxt3 environment with a standard repo as a submodule and the main repo for customizing. At the moment I've a build script with a --watch argument to watch over the standard and custom folder to use the nuxt dev command for both. Is there a way with Nuxt3 to create something like this, without a big build script and handle both parts like in Symfony to replace Vue files from the standard with the custom once and combine TS files in stadnard/plugins/ with custom/plugins/ etc? If someone want to help me, check out https://discord.com/channels/473401852243869706/1396612703132586095 Thanks for the help.

39 Replies

kapa.ai•2mo ago

Hi @Spctr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt 3 provides a feature called layers that is designed for scenarios like yours, where you want to have a "base" (standard) setup and then override or extend it with custom code—very similar to Symfony's environment and override system. How Nuxt Layers Work - Layers allow you to extend a base Nuxt application (which could be your standard repo) with customizations (your main repo). - The structure of a layer is almost identical to a standard Nuxt app. You can override or extend files like components, plugins, pages, composables, etc. - When you extend a layer, files in your custom repo will override those in the base layer if they have the same path and name. For example, if both the base and custom layers have a components/Foo.vue, the one in your custom layer will be used. - Plugins, composables, and other directories are merged, so you can combine functionality from both layers. Setting Up Layers 1. Organize your repos: Place your standard (base) Nuxt project as a layer, and your custom project as the main Nuxt app. 2. Extend the base layer in your custom project's nuxt.config.ts:

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

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

3. Override or add files: Any file you add in your custom project with the same path as in the base will override it. Additional files will be merged (e.g., plugins, composables). 4. Development workflow: You can run nuxt dev in your custom project, and it will watch both the custom and base layer for changes, so you don't need a complex build script for this purpose. References - Nuxt Layers documentation - Authoring Nuxt Layers This approach should give you a Symfony-like environment, allowing you to override and extend functionality cleanly, without the need for a big custom build script. If you need to combine plugins, composables, or other directories, Nuxt's merging and overriding logic in layers will handle this for you automatically. If you need a starter template for layers, you can use the official Nuxt layer template:

npm create nuxt -- --template layer nuxt-layer

npm create nuxt -- --template layer nuxt-layer

For more details and advanced usage, see the linked documentation above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai so I setup two complete nuxt3 environments? the custom and standard one?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, with Nuxt layers, you typically set up your "standard" (base) environment as a Nuxt layer, which is structured almost like a full Nuxt project (it needs at least a nuxt.config.ts and can include components, plugins, etc.). Your "custom" environment is the main Nuxt project that extends this base layer. So, you will have: - A base (standard) Nuxt project (the layer), which can be a standalone Nuxt app or just a directory with the typical Nuxt structure. - A custom Nuxt project (the main app), which uses the extends property in its nuxt.config.ts to include the base layer. You do not need to run two separate Nuxt dev servers. You only run nuxt dev in your custom project, and Nuxt will automatically merge and watch both the custom and base layer files for changes. This setup allows you to override or extend files from the base layer in your custom project, similar to how Symfony handles environment overrides Authoring Nuxt Layers Getting Started: Layers. In summary:
- The base layer is a Nuxt-like directory (not necessarily a full app you run separately). - The custom project is your main Nuxt app, which extends the base. - You only run and develop from the custom project; Nuxt handles the merging and watching for you. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai when I have a plugins folder in the standard but not in the custom then the standard plugins folder will be used?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, if your custom (main) Nuxt project does not have a plugins folder, but your standard (base/layer) project does, then the plugins from the standard layer will be used and auto-registered in your application. Nuxt merges the directories from all layers, so any plugins present in the base layer will be included unless you override them by creating a plugin with the same name/path in your custom project Authoring Nuxt Layers Getting Started: Layers. If you later add a plugin with the same name/path in your custom project, it will override the one from the standard layer. Otherwise, all plugins from the standard layer will be available in your app. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai can i create a src folder in the custom projekt where I can setup the whole nuxt structure for the pages, plugins, etc folders

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In Nuxt 4, the default directory for your application source is the app/ folder, not src/. By default, Nuxt expects to find folders like pages, plugins, components, etc., inside the app/ directory. The ~ alias also points to app/ by default, so ~/pages resolves to app/pages/ New Directory Structure. However, you can customize the source directory by setting the srcDir option in your nuxt.config.ts. For example, if you want to use a src/ folder instead of app/, you can do:

export default defineNuxtConfig({
  srcDir: 'src'
})

export default defineNuxtConfig({
  srcDir: 'src'
})

With this configuration, you can set up the full Nuxt structure (pages, plugins, etc.) inside your src/ folder, and Nuxt will use it as the root for your application files dir config. Summary:
Yes, you can use a src/ folder for your Nuxt structure, but you must set srcDir: 'src' in your config. Otherwise, Nuxt will look for the structure in app/ by default. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai I'm getting this message [16:51:16] ERROR Pre-transform error: Failed to resolve import "@/src/assets/css/main.css" from "virtual:nuxt:D %3A%2FGit%2F01_SNIP_Sniplytic%2F04_Customers%2FJFWS%2FWeb_Frontend_Website%2F.nuxt%2Fcss.mjs". Does the file exist? Plugin: vite:import-analysis File: virtual:nuxt:D%3A%2FGit%2F01_SNIP_Sniplytic%2F04_Customers%2FJFWS%2FWeb_Frontend_Website%2F.nuxt%2Fcss.mjs:1:9 1 | import "@/src/assets/css/main.css"; | ^ 2 | import "@/src/assets/css/fonts.css"; 3 | import "@/src/assets/css/tailwind.css";

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error message indicates that Nuxt (via Vite) cannot resolve the import path @/src/assets/css/main.css. In Nuxt 4, the @ and ~ aliases point to your srcDir, which by default is app/ (or whatever you set in srcDir in your nuxt.config.ts). This means that @/assets/css/main.css or ~/assets/css/main.css would resolve to app/assets/css/main.css if your srcDir is app/ Nuxt Configuration: alias Upgrade Guide: New Directory Structure. If you set srcDir: 'src', then @/assets/css/main.css would resolve to src/assets/css/main.css. However, your import path is @/src/assets/css/main.css, which means Nuxt is looking for srcDir/src/assets/css/main.css (e.g., app/src/assets/css/main.css or src/src/assets/css/main.css), which likely does not exist. How to fix: - If your srcDir is app (default), use:
@/assets/css/main.css or ~/assets/css/main.css - If your srcDir is src, use:
@/assets/css/main.css or ~/assets/css/main.css - Do not include /src/ in the path after the alias. Example:

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    '@/assets/css/fonts.css',
    '@/assets/css/tailwind.css'
  ]
})

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    '@/assets/css/fonts.css',
    '@/assets/css/tailwind.css'
  ]
})

Make sure the files exist at the correct location relative to your srcDir. For more details, see the Nuxt Configuration: alias and Upgrade Guide: New Directory Structure. If you still encounter issues, double-check your srcDir setting and the actual file paths in your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai do I need to set the same css files in the custom and standard project?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You do not need to set the same CSS files in both the custom and standard (base/layer) projects. When using Nuxt layers, the css property from all layers is merged. This means that if you define global CSS files in your standard project (layer), they will be included in the final build of your custom project unless you specifically override or remove them. You only need to add additional or overriding CSS files in your custom project if you want to extend or change the styles from the standard layer Authoring Nuxt Layers. If you want to override a CSS file from the standard layer, you can add a file with the same path in your custom project, and it will take precedence fix(nuxt): correct css order for layers. So, you only need to specify CSS files in your custom project if you want to add or override styles; otherwise, the CSS from the standard project will be used automatically. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai my custom project has the standard repository as a submodule and in the custom is no css file. How should the nuxt configs look like in both projects

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Given your setup: - Standard repository (as a submodule/layer): contains the CSS files and its own nuxt.config.ts. - Custom project: does not have its own CSS files and uses the standard repo as a layer. Here’s how your Nuxt configs should look: --- In the standard (base/layer) repository Your nuxt.config.ts should include the CSS files you want to provide globally:

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    '@/assets/css/fonts.css',
    '@/assets/css/tailwind.css'
  ]
})

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    '@/assets/css/fonts.css',
    '@/assets/css/tailwind.css'
  ]
})

Make sure these files exist in the correct location relative to the layer’s srcDir (by default, app/ or as configured). --- In the custom project Your nuxt.config.ts should extend the standard repository as a layer. You do not need to specify the CSS files again unless you want to add or override them:

export default defineNuxtConfig({
  extends: [
    './path-to-standard-repo' // Adjust the path to your submodule
  ]
  // No need to specify css: [] unless you want to add or override
})

export default defineNuxtConfig({
  extends: [
    './path-to-standard-repo' // Adjust the path to your submodule
  ]
  // No need to specify css: [] unless you want to add or override
})

Nuxt will automatically merge the CSS from the standard layer into your custom project. The custom project will use the CSS files defined in the standard layer unless you explicitly override them Authoring Nuxt Layers fix(nuxt): correct css order for layers. --- Summary:
- Define your CSS files in the standard repo’s nuxt.config.ts. - In the custom project, use the extends property to include the standard repo as a layer. - No need to repeat the CSS config in the custom project unless you want to add or override styles. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai i'm getting an error that the assets modules are not found from the file /.nuxt/css.mjs which is not inside the .nuxt folder in the root folder. the standard folder with the nuxt config is the submodule inside this root folder

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error you're encountering—where asset modules (like CSS files) are not found from the generated .nuxt/css.mjs file—often relates to how Nuxt resolves paths and layers, especially when using a submodule as a base layer. Based on the knowledge sources: - Path Resolution in Layers: When importing assets (like CSS) in a layer's nuxt.config.ts, you must be careful with how you specify paths. Global aliases like ~/ and @/ resolve relative to the user's project, not the layer. This means if your standard (submodule) layer specifies css: ['~/assets/css/main.css'], Nuxt will look for that file in the custom project's directory, not the submodule's. This can cause the "module not found" error you're seeing Relative Paths and Aliases. - Solution: In your standard (submodule) layer's nuxt.config.ts, use a fully resolved path for your CSS files. For example:

  import { fileURLToPath } from 'url'
  import { dirname, join } from 'path'

  const currentDir = dirname(fileURLToPath(import.meta.url))

  export default defineNuxtConfig({
    css: [
      join(currentDir, './assets/css/main.css'),
      join(currentDir, './assets/css/fonts.css'),
      join(currentDir, './assets/css/tailwind.css')
    ]
  })

  import { fileURLToPath } from 'url'
  import { dirname, join } from 'path'

  const currentDir = dirname(fileURLToPath(import.meta.url))

  export default defineNuxtConfig({
    css: [
      join(currentDir, './assets/css/main.css'),
      join(currentDir, './assets/css/fonts.css'),
      join(currentDir, './assets/css/tailwind.css')
    ]
  })

This ensures Nuxt can find the CSS files regardless of where the layer is located Relative Paths and Aliases. - Custom Project Config: In your custom project, you only need to use the extends property to include the standard layer. You do not need to specify the CSS files again unless you want to add or override them. If you follow this approach, Nuxt should correctly resolve and include your assets from the submodule layer, and the error should be resolved. If you continue to have issues, double-check that the asset files exist at the specified paths in your standard layer, and that the resolved paths in the config are correct. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai this my nuxt config in the standard (submodule)

// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir: string = dirname(fileURLToPath(import.meta.url));

export default defineNuxtConfig({
    srcDir: 'src',
    devServer: {
        port: 6005,
    },
    devtools: {
        enabled: true
    },
    css: [
        join(currentDir, './src/assets/css/main.css'),
        join(currentDir, './src/assets/css/fonts.css'),
        join(currentDir, './src/assets/css/tailwind.css')
    ],
    modules: [
        '@nuxt-alt/proxy',
        '@nuxt/ui'
    ],
    build: { },
    runtimeConfig: {
        public: {
            projectName: "Name"
        },
        private: { }
    },
    plugins: [ ],
    postcss: {
        plugins: {
            '@tailwindcss/postcss': {},
            autoprefixer: {},
        },
    },
    app: {
        head: {
            title: 'Nuxt',
            link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ]
        }
    }
});

// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir: string = dirname(fileURLToPath(import.meta.url));

export default defineNuxtConfig({
    srcDir: 'src',
    devServer: {
        port: 6005,
    },
    devtools: {
        enabled: true
    },
    css: [
        join(currentDir, './src/assets/css/main.css'),
        join(currentDir, './src/assets/css/fonts.css'),
        join(currentDir, './src/assets/css/tailwind.css')
    ],
    modules: [
        '@nuxt-alt/proxy',
        '@nuxt/ui'
    ],
    build: { },
    runtimeConfig: {
        public: {
            projectName: "Name"
        },
        private: { }
    },
    plugins: [ ],
    postcss: {
        plugins: {
            '@tailwindcss/postcss': {},
            autoprefixer: {},
        },
    },
    app: {
        head: {
            title: 'Nuxt',
            link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ]
        }
    }
});

With this config the page loads the css files but tailwind was not loaded

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your provided nuxt.config.ts for the standard (submodule) project, you are correctly resolving the CSS file paths using join(currentDir, ...), which is the recommended approach for Nuxt layers to ensure assets are found regardless of where the layer is used Relative Paths and Aliases. However, you mention that while the CSS files are loaded, Tailwind is not working. According to the knowledge sources, there are a few important points to check: 1. Tailwind Integration in Nuxt 4
- If you are using Tailwind CSS, the recommended way is to use the @nuxtjs/tailwindcss module, which handles configuration and integration automatically.
- In your config, you are not including @nuxtjs/tailwindcss in the modules array, but you are importing Tailwind CSS via a CSS file and configuring PostCSS plugins manually. This is not the standard Nuxt approach and may lead to issues with class detection and JIT compilation External Configuration Files. 2. Tailwind Content Detection
- Tailwind needs to know where to look for class names. If you are not using the Nuxt Tailwind module, you must ensure your tailwind.config.js (or tailwind.config.ts) has the correct content paths, especially when using a custom srcDir or layers.
- If Tailwind is not picking up your classes, it may be because the content paths are not set to include your actual Vue/JS/TS files. 3. Recommended Solution
- Use the official Nuxt Tailwind module in your modules array:

     export default defineNuxtConfig({
       modules: [
         '@nuxtjs/tailwindcss',
         '@nuxt-alt/proxy',
         '@nuxt/ui'
       ],
       // ...rest of your config
     })

     export default defineNuxtConfig({
       modules: [
         '@nuxtjs/tailwindcss',
         '@nuxt-alt/proxy',
         '@nuxt/ui'
       ],
       // ...rest of your config
     })

- Remove manual PostCSS plugin configuration unless you have a specific reason to keep it, as the Nuxt Tailwind module handles this for you. - Ensure your tailwind.config.js is present and correct in the root of your standard repo, and that the content array includes all relevant files, e.g.:

     module.exports = {
       content: [
         './src/**/*.{vue,js,ts}',
         // add other paths if needed
       ],
       theme: {
         extend: {},
       },
       plugins: [],
     }

     module.exports = {
       content: [
         './src/**/*.{vue,js,ts}',
         // add other paths if needed
       ],
       theme: {
         extend: {},
       },
       plugins: [],
     }

- Import Tailwind in your main CSS file (which you already do):

     @import "tailwindcss/base";
     @import "tailwindcss/components";
     @import "tailwindcss/utilities";

     @import "tailwindcss/base";
     @import "tailwindcss/components";
     @import "tailwindcss/utilities";

If you follow the above, Tailwind should be loaded and work as expected in your Nuxt layer setup. If you continue to have issues, double-check the content paths in your Tailwind config and ensure the Nuxt Tailwind module is installed and listed in your modules array External Configuration Files. If you need to use PostCSS manually for a specific reason, ensure that the Tailwind plugin is correctly configured and that the build process is picking up your CSS files, but the recommended and most reliable approach is to use the Nuxt Tailwind module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai i've installed tailwind v4 directly with postcss like the new installation way

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you have installed Tailwind CSS v4 directly with PostCSS (using the new CSS-first approach), you should not use the @nuxtjs/tailwindcss module. Instead, you should: 1. Import Tailwind in your main CSS file using the new directives:

   @import "tailwindcss" theme(static);

   @import "tailwindcss" theme(static);

or, for more advanced theming:

   @import "tailwindcss";
   @theme static {
     /* your CSS variables and theme tokens */
   }

   @import "tailwindcss";
   @theme static {
     /* your CSS variables and theme tokens */
   }

2. Configure PostCSS in your nuxt.config.ts:

   export default defineNuxtConfig({
     postcss: {
       plugins: {
         'tailwindcss': {},
         'autoprefixer': {},
       }
     },
     css: [
       // Use a resolved path if in a layer, or a relative path if in the main project
       // e.g., '@/assets/css/main.css'
     ]
   })

   export default defineNuxtConfig({
     postcss: {
       plugins: {
         'tailwindcss': {},
         'autoprefixer': {},
       }
     },
     css: [
       // Use a resolved path if in a layer, or a relative path if in the main project
       // e.g., '@/assets/css/main.css'
     ]
   })

If you are in a layer, use a fully resolved path for the CSS file as described earlier Relative Paths and Aliases. 3. No need for a tailwind.config.js unless you want to customize Tailwind’s configuration. If you do, make sure the content paths include all relevant files. 4. No need to use the Nuxt Tailwind module if you are following the new Tailwind v4 CSS-first approach Nuxt UI Theme Guide. If Tailwind is still not working, double-check: - Your CSS file is correctly imported and resolved. - Your PostCSS config in nuxt.config.ts is correct. - You are using the new Tailwind v4 syntax and not mixing with the old module-based approach. If you are using layers, always use fully resolved paths for your CSS files in the css array to avoid path resolution issues Relative Paths and Aliases. If you need more details on the new theming and Tailwind v4 approach, see the Nuxt UI Theme Guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai Hey guys .. I've tried to fix my tailwind v4 in nuxt v4 problem in my project also with researching on this server (ex.: https://discord.com/channels/473401852243869706/897487139888062506/1348997522873385000) Maybe my project has not the correct setup so I'm trying to describe it and maybe someone finds my mistake my structure

project-root/
├── nuxt.config.ts // extends ./standard/nuxt.config.ts
├── tailwind.config.ts // not included
├── package.json // I call it - "main"
├── src/
│   ├── components/
│   └── pages/
├── standard/ // submodule
│   ├── package.json // I call it - "sub"
│   ├── nuxt.config.ts
│   └── src/ // set in the config srcDir: "src"
│       ├── components/
│       └── pages/
└── .gitmodules

project-root/
├── nuxt.config.ts // extends ./standard/nuxt.config.ts
├── tailwind.config.ts // not included
├── package.json // I call it - "main"
├── src/
│   ├── components/
│   └── pages/
├── standard/ // submodule
│   ├── package.json // I call it - "sub"
│   ├── nuxt.config.ts
│   └── src/ // set in the config srcDir: "src"
│       ├── components/
│       └── pages/
└── .gitmodules

Inside the main package json

// just a snippet
{
  "type": "module",
  "devDependencies": {
    "cpy-cli": "5.0.0",
    "ts-node": "10.9.2",
    "typescript": "5.8.3"
  },
  "private": true,
  "workspaces": [
    "standard",
    "custom"
  ],
  "dependencies": {
    "@nuxt/cli": "3.26.4",
    "standard": "*"
  }
}

// just a snippet
{
  "type": "module",
  "devDependencies": {
    "cpy-cli": "5.0.0",
    "ts-node": "10.9.2",
    "typescript": "5.8.3"
  },
  "private": true,
  "workspaces": [
    "standard",
    "custom"
  ],
  "dependencies": {
    "@nuxt/cli": "3.26.4",
    "standard": "*"
  }
}

Inside the subpackage json

// just a snippet
{
  "type": "module",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.7.2",
    "@fortawesome/free-brands-svg-icons": "6.7.2",
    "@fortawesome/free-regular-svg-icons": "6.7.2",
    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/vue-fontawesome": "3.0.8",
    "@nuxt-alt/proxy": "2.5.8",
    "@nuxt/types": "2.18.1",
    "@nuxt/ui": "3.2.0",
    "@nuxtjs/proxy": "2.1.0",
    "@tailwindcss/typography": "0.5.16",
    "@tailwindcss/vite": "4.1.11",
    "axios": "1.9.0",
    "flowbite": "3.1.2",
    "leaflet": "1.9.4",
    "nuxt": "4.0.1",
    "quill": "2.0.3",
    "tailwindcss": "4.1.11",
    "vue": "3.5.16",
    "vue-router": "4.5.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "4.1.8",
    "@types/leaflet": "1.9.18",
    "autoprefixer": "10.4.21",
    "nuxt-file-storage": "0.3.0"
  }
}

// just a snippet
{
  "type": "module",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.7.2",
    "@fortawesome/free-brands-svg-icons": "6.7.2",
    "@fortawesome/free-regular-svg-icons": "6.7.2",
    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/vue-fontawesome": "3.0.8",
    "@nuxt-alt/proxy": "2.5.8",
    "@nuxt/types": "2.18.1",
    "@nuxt/ui": "3.2.0",
    "@nuxtjs/proxy": "2.1.0",
    "@tailwindcss/typography": "0.5.16",
    "@tailwindcss/vite": "4.1.11",
    "axios": "1.9.0",
    "flowbite": "3.1.2",
    "leaflet": "1.9.4",
    "nuxt": "4.0.1",
    "quill": "2.0.3",
    "tailwindcss": "4.1.11",
    "vue": "3.5.16",
    "vue-router": "4.5.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "4.1.8",
    "@types/leaflet": "1.9.18",
    "autoprefixer": "10.4.21",
    "nuxt-file-storage": "0.3.0"
  }
}

I tried to get all dependencies from the standard inside my main with "standard": "*" At the moment I'm working with the files from the standard/ and start the project out of the main with nuxt dev The layout is gettin loaded and I can see the tailwind classes in the browser dev tools but when I set a class in a vue file it won't be used and I'm still working with tailwind and vue files inside the standard (submodule) where everything is installed sub nuxt.config

// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
import tailwindcss from "@tailwindcss/vite";

const currentDir: string = dirname(fileURLToPath(import.meta.url));

export default defineNuxtConfig({
    compatibilityDate: '2025-07-21',
    srcDir: 'src',
    devServer: {
        port: 6005,
    },
    devtools: {
        enabled: true
    },
    css: [
        join(currentDir, './src/assets/css/main.css'),
        join(currentDir, './src/assets/css/fonts.css'),
        join(currentDir, './src/assets/css/tailwind.css')
    ],
    modules: [
        '@nuxt-alt/proxy',
        '@nuxt/ui'
    ],
    build: { },
    runtimeConfig: {
        public: {
            projectName: "Name"
        },
        private: { }
    },
    plugins: [ ],
    vite: {
        plugins: [
            tailwindcss(),
        ],
    },
    app: {
        head: {
            title: 'Nuxt',
            link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ]
        }
    }
});

// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
import tailwindcss from "@tailwindcss/vite";

const currentDir: string = dirname(fileURLToPath(import.meta.url));

export default defineNuxtConfig({
    compatibilityDate: '2025-07-21',
    srcDir: 'src',
    devServer: {
        port: 6005,
    },
    devtools: {
        enabled: true
    },
    css: [
        join(currentDir, './src/assets/css/main.css'),
        join(currentDir, './src/assets/css/fonts.css'),
        join(currentDir, './src/assets/css/tailwind.css')
    ],
    modules: [
        '@nuxt-alt/proxy',
        '@nuxt/ui'
    ],
    build: { },
    runtimeConfig: {
        public: {
            projectName: "Name"
        },
        private: { }
    },
    plugins: [ ],
    vite: {
        plugins: [
            tailwindcss(),
        ],
    },
    app: {
        head: {
            title: 'Nuxt',
            link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ]
        }
    }
});

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your project structure and configuration, here are the key points and potential issues according to the knowledge sources: --- 1. Layer Path Resolution for CSS When using Nuxt layers (your standard submodule as a base layer), paths in the css array of the base layer's nuxt.config.ts must be fully resolved. You are already using join(currentDir, ...), which is correct and recommended for layers Relative Paths and Aliases. --- 2. Tailwind v4 with PostCSS and Vite You are using Tailwind v4 with the new CSS-first approach and the Vite plugin. This is supported, but you must ensure: - Your main CSS file (e.g., main.css or tailwind.css) imports Tailwind using the new v4 syntax (e.g., @import "tailwindcss"; or with the @theme directive if using theming) Nuxt UI Theme Guide. - Your tailwind.config.ts (or .js) in the standard layer must have the correct content paths, especially since your srcDir is set to src. For example:

  export default {
    content: [
      './src/**/*.{vue,js,ts}',
    ],
    // ...other config
  }

  export default {
    content: [
      './src/**/*.{vue,js,ts}',
    ],
    // ...other config
  }

If this is missing or incorrect, Tailwind will not generate the necessary classes. --- 3. Layer Content Detection If you are editing Vue files in the standard submodule and Tailwind classes are not being applied, it is likely that Tailwind is not detecting your class usage. This is almost always due to the content paths in your Tailwind config not matching the actual file locations Nuxt UI Theme Guide. --- 4. No Need for Tailwind Module You are correctly not using the @nuxtjs/tailwindcss module since you are following the new Tailwind v4/PostCSS-first approach Nuxt UI Theme Guide. --- 5. Vite Plugin Usage You are using the Vite Tailwind plugin in your vite.plugins array, which is correct for this setup. --- 6. Summary of What to Check - Ensure your tailwind.config.ts in the standard submodule has the correct content paths (e.g., ./src/**/*.{vue,js,ts}). - Your main CSS file in the standard submodule should import Tailwind using the new v4 syntax. - You do not need a tailwind.config.ts in the main project unless you want to override or extend the base config. - You do not need to specify the CSS files in the main project; the layer's config will be merged in automatically. --- If you have done all of the above and Tailwind classes still do not appear, double-check the actual file paths and ensure that the resolved paths in your config match the real locations of your files. If the content array is not correct, Tailwind will not generate the classes for your Vue files, even if everything else is set up properly Nuxt UI Theme Guide. If you need to explicitly include additional directories for Tailwind's content detection (for example, if you have components/pages in both the main and standard projects), you can add those paths to the content array in your tailwind.config.ts. --- In summary:
Your setup is almost correct, but the most likely issue is with the content paths in your tailwind.config.ts in the standard submodule. Make sure they match your actual file structure and include all directories where you use Tailwind classes. This should resolve the issue of Tailwind classes not being applied in your Vue files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

@kapa.ai I thought tailwind.config.ts is not needed with v4? in my tailwind.css I've set @import "tailwindcss"; But the tailwind classes are still not set

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct that with Tailwind CSS v4, the configuration is now CSS-first and you can get started by simply importing Tailwind in your CSS file with @import "tailwindcss";. A tailwind.config.ts (or .js) file is not strictly required for basic usage if you are happy with the default configuration Nuxt UI Theme Guide. However, if Tailwind is not generating classes for your Vue files, it is likely because it is not detecting your content files. Even in v4, Tailwind still needs to know where to look for class names. By default, Tailwind will try to automatically detect your source files, but in complex setups (like Nuxt layers, custom srcDir, or monorepos), this detection may not work as expected. In these cases, you may still need a tailwind.config.ts file to explicitly set the content paths so Tailwind knows where to scan for class usage. This is especially important if your files are not in the default locations or you are using a layered structure Nuxt UI Theme Guide.

Summary:
- tailwind.config.ts is optional in v4, but may be necessary if Tailwind is not picking up your classes due to custom project structure. - If your classes are not being generated, add a tailwind.config.ts with a content array that matches your actual file locations (e.g., ./src/**/*.{vue,js,ts}).

For more on the new CSS-first configuration and when to use a config file, see the Nuxt UI Theme Guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

Has someone an idea? @kapa.ai which npm packages do i need to install in the two projects (main and submodule)? or do i need the same packages in both projects?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, you do not need to install all the same npm packages in both your main project and your submodule (standard layer). Here’s how you should approach dependencies for a Nuxt project using layers: - The submodule (standard layer) should include all dependencies it needs for its own code to work (such as nuxt, tailwindcss, @nuxt/ui, etc.) in its own package.json. This ensures that when the layer is used, all required packages for its components, plugins, and styles are available Publishing Layers. - The main project should include its own dependencies and also install the submodule as a dependency (or devDependency). You do not need to duplicate all the submodule’s dependencies in the main project’s package.json. However, if the main project uses features or modules not present in the submodule, you should add those to the main project’s package.json. - Nuxt will resolve dependencies from both the main project and the layer. But, if you publish your layer as an npm package, make sure all its required dependencies are listed in its package.json under dependencies (not just devDependencies) Publishing Layers. - You do not need to install the same packages in both projects unless both require them for their own code. For example, if only the submodule uses @nuxt/ui, only the submodule needs it. If both use it, both should list it. Summary:
- Install required packages in the submodule for its own needs. - Install required packages in the main project for its own needs. - The main project should include the submodule as a dependency. - Do not duplicate dependencies unless both projects need them. If you are unsure whether a package is needed in both, check if both projects directly import or use it. If so, include it in both; otherwise, only where it’s used Publishing Layers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SpctrOP•2mo ago

can someone from the nuxter or admins help

Gaming

Programming

Symfony like environment

Did you find this page helpful?