Vue SDK 1.x to 2.0 migration guide

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.

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:

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

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

const context = {
   kind: 'user',
   key: 'user-key-123abc',
   name: 'Sandy'
}
COPY

Here's how to construct a basic context, with a context kind of something other than "user":

const context = { kind: 'organization', key: 'org-key-123abc', name: 'Global Health Services' }
COPY

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

const deviceContext = { kind: 'device', key: 'device-key-123abc', type: 'iPad' }
const userContext = { kind: 'user', key: 'user-key-123abc', name: 'Sandy' }
const multiContext = {
  kind: 'multi',
  user: userContext,
  device: deviceContext
}
COPY

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.