# @nuskin/app-components

> App level components that contain child components from multiple nuskin component libraries

Latest version **3.27.8** (published 2026-06-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install @nuskin/app-components
pnpm add @nuskin/app-components
yarn add @nuskin/app-components
bun add @nuskin/app-components
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 3.27.8 |
| Published | 2026-06-09 |
| First published | 2020-03-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+33 in 3 direct dependencies) |
| Install scripts | no |
| Author | dev@nuskin.com |
| Maintainers | nkranendonk, emoore, nuskin-cws, klau, rellenberger, akshay263, nishalk, aallani |

## Links

- npm: https://www.npmjs.com/package/@nuskin/app-components
- Repository: git@code.tls.nuskin.io:ns-am/ux/app-components
- Homepage: https://code.tls.nuskin.io/ns-am/ux/app-components/-/blob/master/README.md
- npm.io page: https://npm.io/package/@nuskin/app-components

## Dependencies (19)

- [vue](https://npm.io/package/vue.md) 2.6.11
- [xss](https://npm.io/package/xss.md) ^1.0.9
- [sass](https://npm.io/package/sass.md) 1.25.0
- [axios](https://npm.io/package/axios.md) 1.8.3
- [lodash](https://npm.io/package/lodash.md) 4.17.21
- [vue-mq](https://npm.io/package/vue-mq.md) 1.0.1
- [core-js](https://npm.io/package/core-js.md) 3.6.4
- [v-money](https://npm.io/package/v-money.md) 0.8.1
- [@mdi/font](https://npm.io/package/@mdi/font.md) 3.9.97
- [vue-clamp](https://npm.io/package/vue-clamp.md) ^0.4.0
- [sass-loader](https://npm.io/package/sass-loader.md) 8.0.2
- [@nuskin/ns-icon](https://npm.io/package/@nuskin/ns-icon.md) 2.12.1
- [@nuskin/ns-common-lib](https://npm.io/package/@nuskin/ns-common-lib.md) 1.4.8
- [@nuskin/ns-core-styles](https://npm.io/package/@nuskin/ns-core-styles.md) 2.12.1
- [@nuskin/ns-loyalty-web](https://npm.io/package/@nuskin/ns-loyalty-web.md) 1.5.7
- [@nuskin/loyalty-elements](https://npm.io/package/@nuskin/loyalty-elements.md) 4.2.0
- [vue-stripe-elements-plus](https://npm.io/package/vue-stripe-elements-plus.md) 0.3.2
- [@nuskin/configuration-sdk](https://npm.io/package/@nuskin/configuration-sdk.md) 3.0.0
- [@nuskin/design-components](https://npm.io/package/@nuskin/design-components.md) 8.8.1

## Recent versions

- 3.27.8 (latest) — 2026-06-09
- 3.28.0-it-17535.1 (prerelease) — 2026-05-05
- 3.27.7 — 2026-06-09
- 3.27.6 — 2026-05-21
- 3.27.5 — 2026-04-22
- 3.27.5-pa-1134.4 — 2026-04-21
- 3.27.5-pa-1134.3 — 2026-04-21
- 3.27.5-pa-1134.2 — 2026-04-20
- 3.27.5-pa-1134.1 — 2026-04-17
- 3.27.4 — 2026-01-13
- 3.27.3 — 2026-01-08
- 3.27.3-td-4379.4 — 2026-01-07
- 3.27.3-td-4379.3 — 2026-01-07
- 3.27.3-td-4379.2 — 2026-01-07
- 3.27.3-td-4379.1 — 2026-01-07
- … 755 more at https://npm.io/package/@nuskin/app-components/versions

## README

# 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:
```js
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

```html
<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](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/@nuskin/app-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._