User profile

Loading current user

To access the data of the currently logged-in user, you can use the user property of useUser composable.

import { useUser } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      load,
      user
    } = useUser();

    onSSR(async () => {
      await load();
    });

    return {
      user
    };
  }
}

user property will return null if the user is not logged in. userGetters should handle such cases and return empty data like '', [] etc., depending on the expected return data type. To prevent empty elements in the template, it's a good practice to check if the user is logged in before using getters.

<template>
  ...
    <p v-if="isAuthenticated">
      {{ userGetters.getFullName(user) }}
    </p>
  ...
</template>

<script>
import { useUser, userGetters } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      load,
      user,
      isAuthenticated
    } = useUser();

    onSSR(async () => {
      await load();
    });

    return {
      load,
      user,
      isAuthenticated,
      userGetters
    };
  }
}
</script>

Updating user credentials

Updating user data (except for the current password, which is described in the Changing password section) can be done using updateUser method in useUser composable.

import { useUser } from '@vsf-enterprise/commercetools';

export default {
  setup () {
    const { error, updateUser } = useUser();

    const onSubmit = async (formData) => {
      await updateUser({ user: formData });
      // "error.value.updateUser" should be empty if request was successful
    };

    return {
      onSubmit
    };
  }
}

Changing password

Updating user password can be done using changePassword method in useUser composable. It requires the current and new password to confirm user identity.

import { useUser } from '@vsf-enterprise/commercetools';

export default {
  setup () {
    const { error, changePassword } = useUser();

    const onSubmit = async (formData) => {
      await changePassword({
        current: formData.currentPassword,
        new: formData.newPassword
      });
      // "error.value.changePassword" should be empty if request was successful
    };

    return {
      onSubmit
    };
  }
}

Managing addresses (billing and shipping)

Managing billing and shipping addresses is done using useUserBilling (opens new window) and useUserShipping (opens new window) composables.

Both have an almost identical signature (properties, methods, and getters), so the examples below will only show usage of useUserBilling.

Displaying a list of addresses

To get a list of addresses, use load and billing or shipping properties and getAddresses method on the corresponding getter.

<template>
  ...
    <div
      v-for="address in userBillingGetters.getAddresses(billing)"
      :key="userBillingGetters.getId(address)"
    >
      {{ userBillingGetters.getPostCode(address) }}
    </div>
  ...
</template>

<script>
import { useUserBilling, userBillingGetters } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      billing,
      load
    } = useUserBilling();

    onSSR(async () => {
      await load();
    });

    return {
      billing,
      userBillingGetters
    };
  }
}
</script>

Adding, updating, and deleting addresses

useUserBilling and useUserShipping composables expose number of methods to manage addresses:

• addAddress
• deleteAddress
• updateAddress
• setDefault

Below is the example of using deleteAddress method.

<template>
  ...
    <div
      v-for="address in userBillingGetters.getAddresses(billing)"
      :key="userBillingGetters.getId(address)"
    >
      <button @click="deleteAddress({ address })">
        Delete address
      </button>
    </div>
  ...
</template>

<script>
import { useUserBilling, userBillingGetters } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      billing,
      load,
      deleteAddress
    } = useUserBilling();

    onSSR(async () => {
      await load();
    });

    return {
      billing,
      deleteAddress,
      userBillingGetters
    };
  }
}
</script>

For more information, please refer to documentation for useUserBilling (opens new window) and useUserShipping (opens new window) composables.

Displaying user orders

To get a list of orders, use search and orders properties and getItems method on orderGetters.

<template>
  ...
    <div
      v-for="order in orderGetters.getItems(orders)"
      :key="orderGetters.getId(order)"
    >
      {{ orderGetters.getStatus(order) }}
    </div>
  ...
</template>

<script>
import { useUserOrders, orderGetters } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const {
      orders,
      search
    } = useUserOrders();

    onSSR(async () => {
      await search();
    });

    return {
      orders,
      orderGetters
    };
  }
}
</script>

For more information, please refer to documentation for useUserOrder (opens new window) composable.

Protecting user profile routes

If there is a page that should be accessible only to logged-in users, such as user profile, you can use is-authenticated middleware in the page-level component:

export default {
  middleware: [
    'is-authenticated'
  ]
}