Vue SDK 1.x to 2.0 migration guide

This topic explains the changes in the Vue SDK 2.0 release and how to migrate to that version.

Overview

This topic explains the changes in the Vue SDK 2.0 release and how to adapt code that uses a 1.x version of the Vue SDK to use version 2.0 or later.

Version 2.0 includes several breaking changes. Additionally, if you use the Relay Proxy, you must update your Relay Proxy to version 7.0 before you update your SDK to version 2.

0. To learn more, read the Relay Proxy 7.0 release notes. To upgrade to the latest Relay Proxy version, visit Relay Proxy releases on GitHub.

Before you migrate to version 2.0, update to the latest 1.x version. Some of the changes that are mandatory in 2.0 were originally added in a 1.x version and made optional.

If you update to the latest 1.x version, deprecation warnings appear in areas of your code that need to be changed for 2.

0. You can update them at your own pace while still using 1.x, rather than migrating everything simultaneously. To learn more about updating to the latest 1.x version, visit the SDK’s GitHub repository.

Identifying supported Vue versions for the 2.0 SDK

The LaunchDarkly Vue SDK 2.0 supports Vue 3.2 and newer.

Understanding contexts

Many LaunchDarkly customers create targeting rules for feature flags based on a variety of different information, including attributes pertaining to users, organizations, devices, and more. In previous versions of the LaunchDarkly SDK, you could define this information in a user object, using a combination of built-in and custom attributes. Now you can define this information in a more structured way, using contexts.

Each context has a required attribute called kind that describes the type of attributes it contains. You can also add other attributes. Attributes can be strings, booleans, numbers, arrays, or JSON objects.

When you evaluate a feature flag within your application, the flag’s targeting rules use information from one or more kinds of contexts. For example, you may know:

• the username, first name, last name, and email address of a person, as part of a context with kind of “user”
• the organization, department, and location of a person, as part of a context with kind of “organization”
• the device, model, and operating system of an environment, as part of a context with kind of “device”

This new version of the LaunchDarkly SDK requires you to evaluate feature flags using an evaluation context, which is an object containing one or more contexts.

To learn more about contexts, read Contexts.

Migrating from users to contexts

The 2.0 version of this SDK only operates on contexts. When you migrate from version 1.x, you must replace every instance of a user with a context. For the 2.0 version of the Vue SDK, this means changing each use of LDUser to LDContext.

A context always has a kind attribute. When older versions of the Vue SDK send events to LaunchDarkly, LaunchDarkly will convert the users in those events to contexts with a kind of user.

If a flag configuration specifies any context kinds other than user, older versions of the Vue SDK will not evaluate the flag correctly. You must upgrade your SDK if you are going to use context kinds other than user in your flag configurations.

The primary difference between working with users and working with contexts is that now you must create contexts, not users.

Understanding differences between users and contexts

Where you previously created users, now you must create contexts.

In the Vue SDK, you specify the context as a configuration option. You can pass configuration options to the LDPlugin when it loads, or to the ldInit function if you are using the deferInitialization option. Here’s how:

Setting LDPluginOptions

    const [ldReady, ldClient] = ldInit({ clientSideID, context })

If you omit the context object when you specify the LDPluginOptions, then LaunchDarkly will assume that the context kind is “user”, and that the anonymous attribute is “true” when evaluating flags. Additionally, the SDK will assume you are working with a user object, rather than a context.

We strongly recommend upgrading your SDK to take advantage of the context functionality, and specifying a context in your LDPluginOptions.

Here’s how to construct a basic context, as compared with constructing a user:

Single context with key

    const context = {
       kind: 'user',
       key: 'example-user-key',
       name: 'Sandy'
    }

Here’s how to construct a basic context, with a context kind of something other than “user”:

Single context with key

    const context = { kind: 'organization', key: 'example-organization-key', name: 'Global Health Services' }

Here’s how to construct a multi-context, which includes multiple context kinds:

Multi-context

    const deviceContext = { kind: 'device', key: 'example-device-key', type: 'iPad' }
    const userContext = { kind: 'user', key: 'example-user-key', name: 'Sandy' }

    const multiContext = {
      kind: 'multi',
      user: userContext,
      device: deviceContext
    }

Using this migration guide

The Vue SDK is a wrapper of LaunchDarkly’s JavaScript SDK. For information on shared changes, read the JavaScript SDK migration guide.