AlokaiA
Alokai•3y ago•
11 replies
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"
  }
}


nuxt.config.ts:

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}"],
};



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>


The result is as shown in the image.

Thanks to anyone who can help me!
image.png
Installation | Storefront UI
Documentation for the Storefront UI
Was this page helpful?