Nuxt•2w ago

Github Actions broken Nuxt UI starter build

While generating to static, outputs empty app, and then on client side

<div id="__nuxt">
    <uapp>
        <div class="flex flex-col items-center justify-center gap-4 h-screen">
            <h1 class="font-bold text-2xl text-(--ui-primary)"> Nuxt UI - Starter </h1>
            <div class="flex items-center gap-2">
                <ubutton label="Documentation" icon="i-lucide-square-play" to="https://ui.nuxt.com/getting-started/installation/nuxt" target="_blank"></ubutton>
                <ubutton label="GitHub" color="neutral" variant="outline" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank"></ubutton>
            </div>
        </div>
    </uapp>
</div>

<div id="__nuxt">
    <uapp>
        <div class="flex flex-col items-center justify-center gap-4 h-screen">
            <h1 class="font-bold text-2xl text-(--ui-primary)"> Nuxt UI - Starter </h1>
            <div class="flex items-center gap-2">
                <ubutton label="Documentation" icon="i-lucide-square-play" to="https://ui.nuxt.com/getting-started/installation/nuxt" target="_blank"></ubutton>
                <ubutton label="GitHub" color="neutral" variant="outline" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank"></ubutton>
            </div>
        </div>
    </uapp>
</div>

also, crawler fails to find dynamic routes, but i think it's because it just failed to generate pages itself Also if i remove all nuxt-ui components it will work ok, but i not sure is this problem is only with nuxt ui or more general issue locally all this commands works fine How to recreate: 1) npm create nuxt@latest -- -t ui 2) commit and push to github 3) create githubpages action do not forget to add

env:
  NUXT_APP_BASE_URL: /reponame/

env:
  NUXT_APP_BASE_URL: /reponame/

save and wait for deployment my example: https://github.com/VofSwords/nuxt-issue

GitHub

GitHub - VofSwords/nuxt-issue

Contribute to VofSwords/nuxt-issue development by creating an account on GitHub.

3 Replies

kapa.ai•2w ago

Hi @olegsey. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the provided knowledge sources, your issue with the Nuxt UI starter generating an empty static app (with only the Nuxt UI shell and no content) on GitHub Pages is likely related to how Nuxt handles static site generation, base URLs, and possibly the use of Nuxt UI components. Key Points from the Knowledge Sources 1. Base URL for GitHub Pages
You are correctly setting NUXT_APP_BASE_URL: /reponame/ in your GitHub Actions environment. This is necessary for static deployments to subfolders (like GitHub Pages), and Nuxt supports this via the app.baseURL runtime config, which can be set using the NUXT_APP_BASE_URL environment variable. This should ensure that all asset and route links are prefixed correctly for your repo's subpath deployment see docs. 2. Static Generation and Nuxt UI
The Nuxt UI module is installed and configured by default in the UI starter template. The setup instructions do not mention any special requirements for static generation, but you must ensure that Tailwind CSS and Nuxt UI are properly imported in your CSS, and that your app is wrapped in the <UApp> component see Nuxt UI installation. 3. Crawling and Prerendering
Nuxt's static generation (nuxt generate) uses a crawler to discover and prerender pages. If your pages are not linked from the root or other discoverable pages, they will not be generated. You can manually specify routes to prerender in your nuxt.config.ts using the nitro.prerender.routes option see prerendering docs. 4. Empty Output Issues
There are reports of .output folders being empty after build, often due to misconfiguration or issues with the project setup. In some cases, recreating the project and carefully copying files over resolved the issue, though the root cause was unclear see Stack Overflow discussion. Troubleshooting Steps - Check Nuxt UI and Tailwind CSS Imports:
Ensure your nuxt.config.ts includes both the Nuxt UI module and the CSS import, as shown:

  export default defineNuxtConfig({
    modules: ['@nuxt/ui'],
    css: ['~/assets/css/main.css']
  })

  export default defineNuxtConfig({
    modules: ['@nuxt/ui'],
    css: ['~/assets/css/main.css']
  })

And in your CSS:

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

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

- Wrap App with <UApp>:
Your app.vue should look like:

  <template>
    <UApp>
      <NuxtPage />
    </UApp>
  </template>

  <template>
    <UApp>
      <NuxtPage />
    </UApp>
  </template>

- Prerendering Dynamic Routes:
If the crawler is not finding your dynamic routes, explicitly add them in nuxt.config.ts:

  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: ["/your-dynamic-route"]
      }
    }
  })

  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: ["/your-dynamic-route"]
      }
    }
  })

- Check for Build Errors:
If removing Nuxt UI components makes the build work, there may be a compatibility or configuration issue with Nuxt UI. Double-check that all dependencies are installed and up to date. - Recreate the Project:
If all else fails, try creating a fresh Nuxt UI starter project and carefully migrate your code, as this has resolved similar issues for others see Stack Overflow discussion. Summary Your configuration for GitHub Pages (with NUXT_APP_BASE_URL) is correct. The issue may be with how Nuxt UI is set up, or with the static generation not discovering your routes. Double-check your Nuxt UI integration, ensure all routes are discoverable or explicitly listed for prerendering, and consider recreating the project if the problem persists. The knowledge sources do not provide a definitive fix for this specific combination, but these steps align with documented solutions and troubleshooting advice. If you continue to experience issues, please provide more details about your nuxt.config.ts and project structure for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

olegseyOP•2w ago

bump is only i have this issue?

Gaming

Programming

Github Actions broken Nuxt UI starter build

Did you find this page helpful?