Alokai•3y ago•

11 replies

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

bun 1.0.0

and

Nuxt 3.7.1

Nuxt 3.7.1

.

This is my

package.json

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

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

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

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

Storefront UI not working as expected with Nuxt3

bun 1.0.0

bun 1.0.0

and

Nuxt 3.7.1

Nuxt 3.7.1

.

This is my

package.json

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

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

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

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

Storefront UI not working as expected with Nuxt3

Storefront UI not working as expected with Nuxt3

Similar Threads

Similar Threads

Similar Threads