Storefront UI not working as expected with Nuxt3
Hello all,
I am trying out Storefront UI for Vue with Nuxt3 as a base. I am following the official documentation for the installation process. (https://docs.storefrontui.io/v2/vue/getting-started.html#nuxt)
My problem is that after doing everything wrote in the guide the components are not displayed correctly, more precisely the HTML seems to be correct but the components are rendered without style.
I have installed the tailwind module for Nuxt and it seems to be working.
I am using
bun 1.0.0
and Nuxt 3.7.1
.
This is my package.json
:
nuxt.config.ts
:
And, finally, tailwind.config.ts
:
With App.vue
coded as:
The result is as shown in the image.
Thanks to anyone who can help me!Installation | Storefront UI
Documentation for the Storefront UI
8 Replies
Hi @s0kom 👋 just an idea . . . is this path correct for your project?
Hi @.rohrig thanks for responding.
Yeah, it should be! I have the
node_modules
dir in my project root folderI don't see this mentioned above. Did you complete this step?
looking at the issue, looks like the tailwind imports are wrong, since the button exists and functional, meaning only styling is missing.
most probably what @.rohrig said
Yes, but I tought that the tailwind module did this automatically. Anyway yeah, I have created a src directory and put a style.css inside. I haven't tried to put the css file on the root directory, I will now test if this changes anything
the location of the styles file doesn't matter really, just make sure it's imported in the app 🙂
This is my
style.css
And also importing the stylesheet
Still not working
Well.. I have resolved this 😅
I have deleted the
tailwind.config.js
and left only the ts
one and it's now working as expected.
Sorry to have bothered you all, didn't think that there would be a problem having two of these files.
And it turns out that one doesn't need to create the style.css file as the tailwind module for Nuxt will create these basic configuration if one is not found.