# @studyportals/vue-platform

> Various elements used to build Vue applications.

Latest version **1.0.1** (published 2023-08-18) · 0 weekly downloads

## Install

```sh
npm install @studyportals/vue-platform
pnpm add @studyportals/vue-platform
yarn add @studyportals/vue-platform
bun add @studyportals/vue-platform
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-08-18 |
| First published | 2023-02-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mrmaruf-studyportal, alparslanylmaz, georgianaschipor, tamassoos, dandobrescu, gilalves95, martinestudyportals, simaopcsantos, sp-andrei-dobre, skrothapalli1, armandduijnstudyportals, borismo, victor.vacarescu, michaelaplas, alexandramarginean, jooshuys, studyportals-devops, jens-sp, stormyy, stefanklokgieters, royvaneijndhovensp |

## Links

- npm: https://www.npmjs.com/package/@studyportals/vue-platform
- npm.io page: https://npm.io/package/@studyportals/vue-platform

## Recent versions

- 1.0.1 (latest) — 2023-08-18
- 1.0.1-beta.10008 (beta) — 2023-08-18
- 1.0.1-beta.10007 — 2023-08-18
- 1.0.1-beta.10006 — 2023-08-18
- 1.0.1-beta.10005 — 2023-08-18
- 1.0.1-beta.10004 — 2023-08-18
- 1.0.1-beta.10003 — 2023-08-18
- 1.0.1-beta.10002 — 2023-08-17
- 1.0.1-beta.10001 — 2023-08-17
- 1.0.0 — 2023-02-07
- 1.0.0-0 — 2023-02-07
- 0.9.0 — 2023-02-07
- 0.9.0-test.0 — 2023-02-07
- 0.8.1 — 2023-02-07
- 0.8.0 — 2023-02-07
- … 10 more at https://npm.io/package/@studyportals/vue-platform/versions

## README

# Vue-Platform
Various elements used to build Vue applications.

# Component structure

Commonly, `Vue3` components are composed of three main elements:
1. The declaration, consisting of the call to `defineComponent`, typically placed in a `<Component>.ts` file
2. The template, consisting of the HTML structure and supporting `Vue3` directives, typically placed in a `<Component>.vue` file
3. The code behind, consisting of all state and operations needed to realize the component, typically placed in a `<Component>.CB.ts` file

## `setupComponent`

The `setupComponent` function prepares the code behind for usage in the `Vue3` component. The return value of the `setupComponent` is designed to be directly returned by the `setup` method in the declaration.

```
export default defineComponent({
    ...
    setup: (props) => {
        const codeBehind = new <Component>CB(...);
        ...
        return setupComponent(codeBehind);
    }
})
```

Additional properties can be passed to the template using the `options` parameter of the `setupComponent` function, by supplying the `extras` property.

```
    ...
    return setupComponent(codeBehind, {
        extras: {
            Hello: "World"
        }
    });
```

## Lifecycle hooks

Components often times need to react to transitions in their lifecycle, for various reasons. For instance, initialization operations may be implemented on transition to `mounted`, and unmanaged resources may be disposed on transition to `unmounted`.

You can easily subscribe to lifecycle hooks by implementing one or more of the available interfaces in the code behind: `OnActivated`, `OnBeforeMount`, `OnBeforeUnmount`, `OnBeforeUpdate`, `OnDeactivated`, `OnMounted`, `OnUnmounted`, `OnUpdated`.

## Deployment

Use the `npm` CLI to version and publish the package.

## Unstable

You may need to publish a number of unstable versions while working on a new feature. You first need to select the new version of the package and then append the prerelease identifier. You can use the `preid` to contextualize the versions. The resulting version should match the pattern `a.b.c-<preid>.0` or `a.b.c.-0` if a `preid` is not necessary. You can use `npm version {premajor|preminor|prepatch} --preid=<feature>` or make the adjustments manually. Subsequent unstable versions can be incremented using `npm version prerelease`. You can publish the version using `npm publish --tag beta`.

Consider publishing unstable versions before the feature has been peer reviewed.

## Stable

Use `npm version {major|minor|patch}`, or adjust the version manually. Use `npm publish` to publish the package.

## DLL

The DLL package must be released for each stable version of the package.

1. Update the reference to the package in `dll/package.json`
2. Adjust the version of the DLL package in `dll/package.json`
3. Run `npm run deploy-dll` from the base directory, or `npm publish` from the `dll` directory; for unstable releases use `npm run deploy-dll-beta` from the base directory, or `npm publish --tag beta` from the `dll` directory

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