N
Nuxt•2mo ago
AGill

Nuxt UI starter template fails to boot on stackblitz

More of an FYI. When coming from www.nuxt.new the V3 ui starter fails to boot on stackblitz. Locally it runs fine. Makes it less convenient to make reproductions for issues. Reproduction: https://stackblitz.com/edit/github-hitsapfi?file=app%2Fapp.config.ts Error log below: 
[11:07:27 PM]  ERROR  Cannot load native addon because loading addons is disabled: /home/projects/github-hitsapfi/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node

npm ERR! code 1
npm ERR! path /home/projects/github-hitsapfi
npm ERR! command failed
npm ERR! command sh -c nuxt prepare

npm ERR! A complete log of this run can be found in: /home/.npm/_logs/2025-03-18T03_07_21_552Z-debug-0.log
[11:07:27 PM]  ERROR  Cannot load native addon because loading addons is disabled: /home/projects/github-hitsapfi/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node

npm ERR! code 1
npm ERR! path /home/projects/github-hitsapfi
npm ERR! command failed
npm ERR! command sh -c nuxt prepare

npm ERR! A complete log of this run can be found in: /home/.npm/_logs/2025-03-18T03_07_21_552Z-debug-0.log
Amar Gill
StackBlitz
Nuxt UI v3 starter - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @AGill. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for reporting this issue with the Nuxt UI starter template. This appears to be related to Tailwind CSS v4 and its native addon loading in the Stackblitz environment. The error you're encountering is specifically related to the Tailwind CSS Oxide engine (a Rust-based implementation) which is having trouble loading in the Stackblitz environment. This is causing the nuxt prepare command to fail during initialization. Possible solutions: 1. Use an alternative starter template: You could try using one of the other Nuxt starter templates that might not have this specific dependency issue. 2. Manually configure Nuxt UI: Instead of using the starter template, you could create a basic Nuxt project and then add Nuxt UI manually following the installation guide from the Nuxt UI documentation. 3. Try a different environment: This appears to be specific to the Stackblitz environment's restrictions on loading native addons. You might have better luck with a local development environment or another online IDE. For manual installation: If you decide to set up Nuxt UI manually, here are the steps: 1. Install the package: 
npm install @nuxt/ui
npm install @nuxt/ui
2. Add the module to your nuxt.config.ts: 
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
3. Import Tailwind CSS and Nuxt UI in your CSS: 
@import "tailwindcss" theme(static);
@import "@nuxt/ui";
@import "tailwindcss" theme(static);
@import "@nuxt/ui";
4. Add the CSS to your Nuxt config: 
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
5. Wrap your app with the App component: 
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
This issue appears to be related to the environment constraints rather than a problem with the Nuxt UI package itself. If you continue to experience issues, you might want to consider creating a local project using the CLI: 
npx nuxi init -t ui <my-app>
npx nuxi init -t ui <my-app>
I hope this helps! Let me know if you need any further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@508382519146709018> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
AGill
AGillOP•2mo ago
Thanks @kapa.ai looks like Code Sandbox environment does boot so I can use that. Good robot.
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear that CodeSandbox is working better for you! That's a good alternative environment for Nuxt UI development. CodeSandbox is indeed one of the recommended online environments for trying out Nuxt, as mentioned in the Nuxt documentation. It's designed to handle the dependencies and build processes that Nuxt requires, including the Tailwind CSS integration that Nuxt UI depends on. If you're looking to continue with Nuxt UI development, you can also check out the specific Nuxt UI playground on CodeSandbox that's mentioned in the installation documentation. Happy coding with Nuxt UI! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@508382519146709018> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?