storefront-ui

storefront-ui copied to clipboard

Describe the bug I built a nuxt project and used only the included classes. When i generate the static website I can see css missing and the buttons being quite ugly.

How to reproduce 1.Create a nuxt project

yarn create nuxt-app test-storefrontui-nuxt
cd test-storefrontui-nuxt

2. Install StorefrontUI

yarn add @storefront-ui/vue

3. Modify nuxt.config.js

  css: [
    "@storefront-ui/vue/styles.scss",
  ],
  build: {
    transpile: [/^@storefront-ui/],
  },

4. Modify pages/index.vue

<template>
  <SfCallToAction
    title="Subscribe to Newsletters"
    buttonText="Subscribe"
    link="/"
    description="Be aware of upcoming sales and events. Receive gifts and special offers!"
    background="#e1e3e2"
    image=""
  />
</template>

<script>
import { SfCallToAction } from "@storefront-ui/vue";
export default {
  components: {
    SfCallToAction
  }
}
</script>

5. Launch the site yarn dev
6. Check the button
7. Generate the static site and launch it

yarn build
yarn generate
yarn start

8. Check the button

Expected behavior Both buttons should be identical

Actual behavior CSS classes are missing

Additional context I'm not sure if it's a bug or if I'm doing something wrong as I'm quite new to this stack.

┆Issue is synchronized with this Jira Zadanie by Unito

Just realized that if I comment the transpile line everything is working as expected Since I followed your documentation mentioning to actually add it for a nuxt project I don't know any more what the right setup is.

Hi @SkullyFM

Thanks for creating this issue. We will take a look at that and let you know what is the correct approach.

@SkullyFM

Could you please create a very simple reproduction repository for your particular case with static nuxt site? I will be happy to help with that issue.

@Baroshem Sure. Below is a repository where you can find the most simple nuxt project with just a SfCallToAction. The code comes directly from your documentation. yarn dev will show you the correct styles yarn start will show you the dist folder where the button has a different layout. Loading directly the index.html file in a browser brings the same result https://github.com/SkullyFM/test-storefrontui-nuxt

Thanks @SkullyFM

I added this issue to our roadmap for 0.10.9 (next release). Next week we will be releasing the version 0.10.8, so right after that we will focus on resolving your issue.

Stay tuned!

Hi @SkullyFM

I tested your repository and indeed the styles are not correct even for such a simple repo. Unfortunately it was not working for me when I tried commenting transpile. It resulted in build error. I checked how Storefront UI is implemented in VSF and if the problem also occurs there. The styling was the same in dev and prod environment.

I created a feature request to develop a Storefront UI module for Nuxt.js -> https://github.com/vuestorefront/storefront-ui/issues/1899. As this is quite a big feature I added it to the next version roadmap (0.10.10). I will let you know about the next steps.

@SkullyFM

I tried doing a simple PoC of this Storefront UI module for Nuxt.js but it seems that the problem is still there. It does not happen for all components (which means it is not a global problem, rather single components problem). I have created an issue for that to analyze what components are different.

Sorry @Baroshem for not getting back to you yesterday. I have been traveling the last 2 days and couldn't access my emails.

I did some additional tests with commenting the transpile instructions and I got the same build errors as you. Funny thing is if you still continue with the yarn generate and yarn start commands the site will load even with a missing index.html file. This is probably because of how nuxt works and I might have jumped to conclusion too fast.