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