Alokai•16mo ago

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

8 Replies

rohrig•16mo ago

Hi @s0kom 👋 just an idea . . . is this path correct for your project?

s0komOP•16mo ago

Hi @.rohrig thanks for responding. Yeah, it should be! I have the node_modules dir in my project root folder

rohrig•16mo ago

I don't see this mentioned above. Did you complete this step?

skirianov•16mo 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

s0komOP•16mo 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•16mo ago

the location of the styles file doesn't matter really, just make sure it's imported in the app 🙂

s0komOP•16mo ago

This is my style.css

s0komOP•16mo 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.

Gaming

Programming

Storefront UI not working as expected with Nuxt3