Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

andyjameswhite's avatar

Vue + Shadcn Components fresh install of Jetstream Intertia

Decided to use Jetstream + Vue + Intertia for my personal project (served as SSR).

After looking around for ages I most liked the look of the Shadcn component library.

Got everything setup with the above Jetstream boilerplate and downloaded Shadcn all looking good and put my first component on to the Dashboard and it will not display!

The only odd thing is that when I inspect the HTML the tag is greyed out with the content being #document-fragment

The following things all seem fine

  1. NPM run watch/dev/build all fine
  2. Vue Dev tools is fine the component shows up under <Button><Primative> and applies the correct styles as specified
  3. I get no error messages on the console

It's literally as if the class display:none was applied to the component, it shows up using Inspect, but is greyed out.

You can recreate this in 5 minutes - this is what I ran I can't imagine the options are the cause of this

  1. composer create-project laravel/laravel project
  2. composer require laravel/jetstream
  3. php artisan jetstream:install inertia --teams --ssr --dark
  4. migrate, do any other bits needed to get Jetstream up

Follow the install instructions here https://www.shadcn-vue.com/docs/installation/laravel.html

  1. I opted for none typescript version
  2. CSS variables I opted no
  3. it overwrites tailwind.config.js so I took a copy of the Jetstream version and worked a few of the lines back into the new version.
  4. Despite overwriting app.css and jsconfig I don't think this matters

Go to Dashboard.vue import { Button } from '@/Components/ui/button'

No button appears!

I'm baffled can someone help?

0 likes
2 replies
LaryAI's avatar
LaryAI
AI
1 year ago
Level 58

It sounds like you're experiencing an issue where the Shadcn component is not rendering as expected in your Vue + Jetstream + Inertia setup. Here are a few steps you can take to troubleshoot and potentially resolve the issue:

  1. Check Component Import Path: Ensure that the import path for the Button component is correct. Double-check the path and make sure it matches the directory structure in your project.

    import { Button } from '@/Components/ui/button';

  2. Verify Component Registration: Make sure that the Button component is properly registered if you're using it locally within the Dashboard.vue file. If it's a global component, ensure it's registered globally in your Vue instance.

  3. Inspect CSS and Styles: Since the component is showing up in the DOM but is greyed out, it might be a CSS issue. Check if there are any CSS rules that might be affecting the visibility of the component, such as display: none or visibility: hidden.

    Use your browser's developer tools to inspect the element and see what styles are being applied. Look for any inherited styles that might be causing the issue.

  4. Tailwind Configuration: Since you mentioned that the tailwind.config.js was overwritten, ensure that the necessary configurations for Shadcn components are included. Compare the configurations and make sure any required plugins or settings are present.

  5. Check for JavaScript Errors: Even though you mentioned there are no console errors, double-check for any warnings or errors that might not be immediately obvious. Sometimes, issues in other parts of the application can affect component rendering.

  6. SSR Considerations: Since you're using SSR, ensure that the component is compatible with server-side rendering. Some components might have issues when rendered on the server.

  7. Rebuild Assets: After making changes, ensure you rebuild your assets. Run the following commands to clear any cached files and rebuild:

    npm run dev

  8. Test with a Simple Component: As a sanity check, try rendering a simple component or even plain HTML in the same place to ensure that the issue is specific to the Shadcn component and not a broader rendering issue.

If none of these steps resolve the issue, consider reaching out to the Shadcn community or checking their documentation for any known issues or additional setup steps that might be required.

andyjameswhite's avatar

Oh dear. I blindly copied the "Usage" example, which included the template tag around the component.

Obviously without any conditionals or slots, it just didn't show up and of course neither did the component.

I'm going to consider this not time wasted as a) I learnt loads about the frameworks b) should someone else come across this IMO shadcn-vue works great with Jetstream Inertia

Please or to participate in this conversation.