A
Alokai•14mo ago
s0kom

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:
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/tailwindcss": "^6.8.0",
"@storefront-ui/vue": "^2.5.0",
"nuxt": "^3.7.1",
"nuxt-medusa": "^0.4.0"
},
"dependencies": {
"@nuxt/image": "rc"
}
}
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/tailwindcss": "^6.8.0",
"@storefront-ui/vue": "^2.5.0",
"nuxt": "^3.7.1",
"nuxt-medusa": "^0.4.0"
},
"dependencies": {
"@nuxt/image": "rc"
}
}
nuxt.config.ts:
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["nuxt-medusa", "@nuxtjs/tailwindcss", "@nuxt/image"],
image: {},
});
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["nuxt-medusa", "@nuxtjs/tailwindcss", "@nuxt/image"],
image: {},
});
And, finally, tailwind.config.ts:
import type { Config } from "tailwindcss";
import { tailwindConfig } from "@storefront-ui/vue/tailwind-config";

export default <Config>{
presets: [tailwindConfig],
content: ["./**/*.vue", "./node_modules/@storefront-ui/vue/**/*.{js,mjs}"],
};
import type { Config } from "tailwindcss";
import { tailwindConfig } from "@storefront-ui/vue/tailwind-config";

export default <Config>{
presets: [tailwindConfig],
content: ["./**/*.vue", "./node_modules/@storefront-ui/vue/**/*.{js,mjs}"],
};
With App.vue coded as:
<template>
<SfButton type="button" class="w-full"> Hello </SfButton>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>
<template>
<SfButton type="button" class="w-full"> Hello </SfButton>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>
The result is as shown in the image. Thanks to anyone who can help me!
Installation | Storefront UI
Documentation for the Storefront UI
No description
8 Replies
rohrig
rohrig•14mo ago
Hi @s0kom 👋 just an idea . . . is this path correct for your project?
No description
s0kom
s0kom•14mo ago
Hi @.rohrig thanks for responding. Yeah, it should be! I have the node_modules dir in my project root folder
rohrig
rohrig•14mo ago
I don't see this mentioned above. Did you complete this step?
No description
skirianov
skirianov•14mo ago
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
s0kom
s0kom•14mo ago
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
skirianov
skirianov•14mo ago
the location of the styles file doesn't matter really, just make sure it's imported in the app 🙂
s0kom
s0kom•14mo ago
This is my style.css
No description
s0kom
s0kom•14mo ago
<template>
<SfButton type="button" class="w-full"> Hello </SfButton>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
import "@/src/style.css"
</script>
<template>
<SfButton type="button" class="w-full"> Hello </SfButton>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
import "@/src/style.css"
</script>
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.
Want results from more Discord servers?
Add your server