UI3 on stackblitz
Yo Kapi
I want to setup Nuxt UI 3 on stackblitz to have some issue reproduction, but I don't seem to be able to (important to note that I have no problem to do it with UI 2)
Here is the current error :
12 Replies
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand you're having issues setting up Nuxt UI 3 on Stackblitz, particularly with a Tailwind CSS error related to the oxide-linux-x64-musl native addon.
This error is related to Tailwind CSS v4, which Nuxt UI 3 uses. Tailwind CSS v4 includes native addons that might not be compatible with some environments like Stackblitz.
Based on the knowledge sources, Nuxt UI v3 has been rebuilt from the ground up with several significant changes:
- It now uses Tailwind CSS v4, which has migrated from JavaScript to CSS-based configuration Migration Guide
- The underlying component library has changed from Headless UI to Reka UI
The error you're seeing is likely because Stackblitz's environment doesn't support the native addons that Tailwind CSS v4 uses.
A potential solution might be found in a similar issue with DaisyUI and Tailwind CSS in Nuxt 3, where downgrading Tailwind CSS and @tailwindcss/vite to version 4.0.3 resolved the problem Github Issue.
You could try:
1. Creating a package.json override to force specific versions:
2. Alternatively, you might want to try using one of the official Nuxt UI starters or templates which are pre-configured:
- For Nuxt:
npx nuxi init -t ui <my-app> Nuxt Installation
- For Vue: npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app> Vue Installation
3. You could also check out the official Nuxt UI v3 playground on CodeSandbox: Nuxt UI3 Playground
If you continue to face issues, it might be worth reporting this as a specific compatibility problem between Nuxt UI 3, Tailwind CSS v4, and Stackblitz.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai can I dot the solution 2 on stackblitz ? how ?
Let me check the knowledge base for you again. One moment! :books:
----------------------
I understand you're asking about implementing solution 2 from my previous answer (using official Nuxt UI starters/templates) directly on Stackblitz.
Yes, you can use official Nuxt UI templates on Stackblitz, though the approach is slightly different than using the CLI locally. Here's how to do it:
1. Go to Stackblitz (https://stackblitz.com/)
2. Instead of using the CLI commands I mentioned before, you can directly open one of the official playground environments:
- For Nuxt UI 3: Use the official Nuxt UI 3 playground mentioned in the documentation
- For Vue with Nuxt UI 3: Use the Vue playground 3. Alternatively, you can create a new project on Stackblitz and import directly from GitHub: - Click "Create New Project" - Select "Import from GitHub" - Enter one of these repositories: -
- For Vue with Nuxt UI 3: Use the Vue playground 3. Alternatively, you can create a new project on Stackblitz and import directly from GitHub: - Click "Create New Project" - Select "Import from GitHub" - Enter one of these repositories: -
nuxt/starter (with the UI branch)
- nuxtlabs/nuxt-ui-vue-starter
- Or one of the UI Pro templates if you have access to them
The advantage of using these official playgrounds or templates is that they're pre-configured with the correct dependencies and settings to work properly in online environments like Stackblitz.
If you're still encountering the Tailwind CSS native addon error, you might need to try the CodeSandbox playgrounds specifically mentioned in the Nuxt UI documentation, as they may have better compatibility with the required dependencies.
Nuxt UI Installation and Vue UI Installation pages both link to official playgrounds that should work out of the box.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai if you mean the project template, there is Nuxt 3 but not Nuxt UI 3
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're right, and I apologize for the confusion. Looking at the Stackblitz templates, they indeed offer Nuxt 3 templates but not specifically Nuxt UI 3 templates.
For using Nuxt UI 3 on Stackblitz, your best options are:
1. Use the official CodeSandbox playground links mentioned in the Nuxt UI documentation:
- For Nuxt UI 3: Nuxt UI3 Playground
- For Vue with Nuxt UI 3: Vue UI3 Playground
2. Start with a basic Nuxt 3 template on Stackblitz and then manually add Nuxt UI 3, though this might still encounter the Tailwind CSS v4 native addon issue you mentioned.
3. Fork one of the CodeSandbox playgrounds mentioned above, as they're already configured to work with Nuxt UI 3.
The Nuxt UI documentation specifically points to these CodeSandbox environments rather than Stackblitz for their official playgrounds, which suggests they might be better tested and configured for compatibility with Nuxt UI 3's dependencies, particularly Tailwind CSS v4.
If you specifically need to use Stackblitz, you might need to wait for better compatibility with Tailwind CSS v4's native addons, or consider using Nuxt UI 2 for now as you mentioned it works without issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai I feel like you want me to jump off a cliff, should I
Let me check the knowledge base for you again. One moment! :books:
----------------------
I apologize, but I'm designed to only answer questions about Nuxt, the Vue.js framework. The question you've asked isn't related to Nuxt, its features, installation, or usage.
If you have any questions about Nuxt, Nuxt UI, or related technologies like Vue.js, Tailwind CSS integration with Nuxt, or specific Nuxt components, I'd be happy to help you with those topics.
Is there something specific about Nuxt or Nuxt UI that you'd like assistance with?
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
It's fine you did ok, I'll go have a look to Codesandbox again