Product Components

@nuskin/product-components

This project contains Vue UI components for Nuskin product display.

Prerequisites

Before installing @nuskin/product-components, you will have to add its peer dependencies and set up the run config.

Peer Dependencies

See src/package.json and find the "peerDependencies" section for most-accurate information.

Using NPM:

npm i @nuskin/ns-account@4

npm i @nuskin/ns-checkout-common@3

npm i @nuskin/ns-product@3

npm i @nuskin/ns-shop@3

npm i @nuskin/ns-util@3

npm i @nuskin/ns-feature-flags@1

or

npm i @nuskin/ns-account@4 @nuskin/ns-checkout-common@3 @nuskin/ns-product@3 @nuskin/ns-shop@3 @nuskin/ns-util@3 @nuskin/ns-feature-flags@1

Using Yarn:

yarn add @nuskin/ns-account@4

yarn add @nuskin/ns-checkout-common@3

yarn add @nuskin/ns-product@3

yarn add @nuskin/ns-shop@3

yarn add @nuskin/ns-util@3

yarn add @nuskin/ns-feature-flags@1

or

yarn add @nuskin/ns-account@4 @nuskin/ns-checkout-common@3 @nuskin/ns-product@3 @nuskin/ns-shop@3 @nuskin/ns-util@3 @nuskin/ns-feature-flags@1

Run Config

This package uses services and events from external libraries that require a run config to be initialized when the app is first loaded.

Example:

import { RunConfigService } from "@nuskin/ns-util";

// ...
// WARNING: these should come from app/user configuration
const countryCode = "US";
const language = "en";
const baseUrl = "https://test.nuskin.com";

// Initialize run config
let runConfig = RunConfigService.getRunConfig();
if (!runConfig || !runConfig.baseUrl) {
  runConfig = {
    country: countryCode,
    language: language,
    baseUrl: baseUrl
  };
  RunConfigService.setRunConfig(runConfig);
}
// ...

Installing

Using NPM:

npm i @nuskin/product-components

Using Yarn:

yarn add @nuskin/product-components

Example Usage

<template>
  <!-- ... -->
    <NsProductCard sku="01550004" />
  <!-- ... -->
</template>

<script>
import { NsProductCard } from "@nuskin/product-components";

export default {
  //...
  components: {
    // ...
    NsProductCard
  },
  //...
}
</script>

Resources

• https://nuskin.design
• https://code.tls.nuskin.io/ns-am/ux/product-components

License

MIT