@nuskin/app-components

App Components

@nuskin/app-components

This project contains Vue UI components written for app features such as the standard Nuskin header and footer and other components comprised of Nuskin component libraries.

Prerequisites

Before installing @nuskin/app-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-product@3

npm i @nuskin/ns-shop@3

npm i @nuskin/my-site-api@3

npm i @nuskin/ns-util@3

npm i @nuskin/product-components@2

or

npm i @nuskin/ns-account@4 @nuskin/ns-product@3 @nuskin/ns-shop@3 @nuskin/ns-util@3 @nuskin/product-components@2 @nuskin/my-site-api@3

Using Yarn:

yarn add @nuskin/ns-account@4

yarn add @nuskin/ns-product@3

yarn add @nuskin/ns-shop@3

yarn add @nuskin/ns-util@3

yarn add @nuskin/product-components@2

yarn add @nuskin/my-site-api@3

or

yarn add @nuskin/ns-account@4 @nuskin/ns-product@3 @nuskin/ns-shop@3 @nuskin/ns-util@3 @nuskin/product-components@2 @nuskin/my-site-api@3

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/app-components

Using Yarn:

yarn add @nuskin/app-components

Example Usage

<template>
  <NsHeader />
  <!-- ... -->
</template>

<script>
import { NsHeader } from "@nuskin/app-components";

export default {
  // ...
  components: {
    NsHeader
    // ...
  }
  // ...
};
</script>

Resources

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

License

MIT