How to integrate Storefrontui with NuxtJs?

Let’s provide you some introduction about the storefrontui.

Storefront UI is developer-friendly, customization-first and performance oriented component library which helps you to make your design fast and easiest way to mobile friendly.

Let’s start the integration with the NuxtJs

1. Install Storefrontui
   npm install --save @storefront-ui/vue
# or
yarn add @storefront-ui/vue --save
2. Import Storefrontui css with your main NuxtJs configuration file.
   Path: <root>/nuxt.config.js

export default {
  ...,
  css: [ “@storefront-ui/vue/styles.scss” ]
}

3. Configure the storefront-ui in Build configuation of NuxtJs
Path: <root>/nuxt.config.js

export default {
  ...,
  build: {
    transpile: [/^@storefront-ui/],
  }
}

4. Now, You can use any storefront-ui component in you NuxtJs. Let’s say we need to add SfSteps in any component (Let’s say component name is Checkout.vue)

<template>
  <div>
    <SfSteps v-model="active" :steps="steps" :can-go-back="canGoBack">
      <SfStep v-for="(step, key) in steps" :key="key" :name="step">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 18.75rem;
            background-color: #f2f2f2;
          "
        >
          {{ step }}
        </div>
      </SfStep>
    </SfSteps>
  </div>
</template>
<script>
import { SfSteps } from '@storefront-ui/vue'
export default {
  components: {
    SfSteps,
  },
  data() {
    return {
      active: 0
      steps: ['Personal details', 'Shipping', 'Billing address'],
      canGoBack: true,
    }
  }
}
</script>

Finally, Here is your nuxt.config.js file configuration for storefront-ui

export default {
  ...
  /*
   ** Global CSS
   */
  css: ["@storefront-ui/vue/styles.scss"],
  ...
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
      transpile: [/^@storefront-ui/],
  },
}

Thank you for reading this post. Hope you’ve understood the concept to integrate storefront-ui with NuxtJs.
Let me know in comment if still having some issue with the integration