+
+In this example:
+
+- the `user` property is the primary state,
+- the `loading` and `error` properties represent the supportive state,
+- the `load`, `register`, `login`, `logout`, and `changePassword` are methods.
+
+## Usage
+
+Let's see how you can use the [useUser](/api-reference/magento-theme.useuserinterface.html) composable to load the current user's data:
+
+```vue
+
+```
+
+Let's go step by step through this example to understand what's going on:
+
+1. We begin by extracting needed methods and state variables from the composable.
+2. Next, we call the asynchronous `load` method within the `useFetch` hook to load user data.
+3. Finally, we return the `user` object from the `setup` method to make it available in the components ``.
+
+While it's okay to destructure a composable as we did in step 1, you should **not** destructure read-only states, such as the `user` or `error` properties. Doing it this way will create variables that are not reactive and don't update.
+
+```javascript
+// β Destructuring `user` will create variables that aren't reactive and don't update
+const { user: { value: { firstname } } } = useUser();
+
+// βοΈ Using `computed` will make the variable react to changes in the `user` object
+const { user } = useUser();
+const firstname = computed(() => user.value.firstname);
+```
+
+This raises two questions:
+
+1. What is the `useFetch`, and what does it do?
+2. What happened when we called the `load` method?
+
+### `useFetch` and other hooks for fetching data
+
+There are many hooks available in Composition API, but let's only focus on the most common ones used for fetching data:
+
+- The [useFetch](https://composition-api.nuxtjs.org/lifecycle/usefetch/) and [useAsync](https://composition-api.nuxtjs.org/API/useAsync) are Nuxt-specific hooks called on the server-side when rendering the route and on the client-side when navigating between pages.
+- The `onMounted` is a lifecycle hook called **only on the client-side** after the browser loads the page.
+- The `onServerPrefetch` is a lifecycle hook called **only on the server-side** when rendering the route.
+
+You can use one or more hooks simultaneously, even in the same component.
+
+### Internals of the `load` method
+
+You might be wondering what happened within the composable when we called the `load` method in the example above. The behavior of methods is different between composables. Still, in the case of the `useUser` composable, the `load` method updated the `loading`, `error`, and `user` properties to reflect the current state, made an API call, and then updated the state with the API's response.
+
+
+
+1. It set the `loading` property to `true`.
+2. It called the corresponding API endpoint to load the current user's data.
+ - if the request succeeded, it updated the `user` property,
+ - otherwise, it added the error message to the `error` property.
+3. It set the `loading` property to `false`.
+
+## What's next?
+
+Now that you understand what composables are, you should see the [List of composables](./list-of-composables.html) and their options.
diff --git a/docs/composition/list-of-composables.md b/docs/composition/list-of-composables.md
new file mode 100644
index 000000000..a170371ea
--- /dev/null
+++ b/docs/composition/list-of-composables.md
@@ -0,0 +1,211 @@
+# List of composables
+
+## `useAddresses`
+
+Allows loading and manipulating addresses of the current user. These addresses can be used for both billing and shipping.
+
+See the [UseAddressesInterface](/api-reference/magento-theme.useaddressesinterface.html) for more information.
+
+## `useApi`
+
+Allows executing arbitrary GraphQL queries and mutations.
+
+See the [UseApiInterface](/api-reference/magento-theme.useapiinterface.html) for more information.
+
+## `useBilling`
+
+Allows loading and saving billing information of the current cart.
+
+See the [UseBillingInterface](/api-reference/magento-theme.usebillinginterface.html) for more information.
+
+## `useCart`
+
+Allows loading and manipulating cart of the current user.
+
+See the [UseCartInterface](/api-reference/magento-theme.usecartinterface.html) for more information.
+
+## `useCategory`
+
+Allows loading categories from Magento API. It is commonly used in navigation menus, and provides the load function and refs for the categories, loading and error.
+
+See the [UseCategoryInterface](/api-reference/magento-theme.usecategoryinterface.html) for more information.
+
+## `useCategorySearch`
+
+Allows searching for categories. It is commonly used in subtrees navigation.
+
+See the [UseCategorySearchInterface](/api-reference/magento-theme.usecategorysearchinterface.html) for more information.
+
+## `useConfig`
+
+Allows interacting with the store configuration.
+
+See the [UseConfigInterface](/api-reference/magento-theme.useconfiginterface.html) for more information.
+
+## `useContent`
+
+Allows loading CMS Pages or Blocks from Magento API.
+
+See the [UseContentInterface](/api-reference/magento-theme.usecontentinterface.html) for more information.
+
+## `useCountrySearch`
+
+Allows fetching a list of countries or a single country by ID
+
+See the [UseCountrySearchInterface](/api-reference/magento-theme.usecountrysearchinterface.html) for more information.
+
+## `useCurrency`
+
+Allows loading and changing the currency.
+
+See the [UseCurrencyInterface](/api-reference/magento-theme.usecurrencyinterface.html) for more information.
+
+## `useExternalCheckout` (Work in progress)
+
+Allows redirecting to external checkout process. It depends on the [magento2-external-checkout repository](https://github.com/Vendic/magento2-external-checkout).
+
+See the [UseExternalCheckoutInterface](/api-reference/magento-theme.useexternalcheckoutinterface.html) for more information.
+
+## `useFacet`
+
+Allows searching for products with pagination, totals and sorting options.
+
+See the [UseFacetInterface](/api-reference/magento-theme.usefacetinterface.html) for more information.
+
+## `useForgotPassword`
+
+Allows to request a password reset email and to set a new password to a user.
+
+Se the [UseForgotPasswordInterface](/api-reference/magento-theme.useforgotpasswordinterface.html) for more information.
+
+## `useGetShippingMethods`
+
+Allows fetching shipping methods available for a given cart.
+
+See the [UseGetShippingMethodsInterface](/api-reference/magento-theme.usegetshippingmethodsinterface.html) for more information.
+
+## `useGuestUser`
+
+Allows to attach a guest cart to a user.
+
+See the [UseGuestUserInterface](/api-reference/magento-theme.useguestuserinterface.html) for more information.
+
+## `useImage`
+
+Allows extracting image paths from magento URL.
+
+See the [UseImageInterface](/api-reference/magento-theme.useimageinterface.html) for more information.
+
+## `useMagentoConfiguration`
+
+Allows getting the Magento's major definitions, e.g., the selected currency, store, locale, and config object.
+
+See the [UseMagentoConfigurationInterface](/api-reference/magento-theme.usemagentoconfigurationinterface.html) for more information.
+
+## `useMakeOrder`
+
+Allows making an order from a cart.
+
+See the [UseMakeOrderInterface](/api-reference/magento-theme.usemakeorderinterface.html) for more information.
+
+## `useNewsletter`
+
+Allows updating the subscription status of an email in the newsletter.
+
+See the [UseNewsletterInterface](/api-reference/magento-theme.usenewsletterinterface.html) for more information.
+
+## `usePaymentProvider`
+
+Allows loading the available payment methods for current cart, and selecting (saving) one of them.
+
+See the [UsePaymentProviderInterface](/api-reference/magento-theme.usepaymentproviderinterface.html) for more information.
+
+## `useProduct`
+
+Allows loading product details or list with params for sorting, filtering and pagination.
+
+See the [UseProductInterface](/api-reference/magento-theme.useproductinterface.html) for more information.
+
+## `useRelatedProducts`
+
+Allows searching for related products with params for sort, filter and pagination.
+
+See the [UseRelatedProductsInterface](/api-reference/magento-theme.userelatedproductsinterface.html) for more information.
+
+## `useReview`
+
+Allows loading and adding product reviews.
+
+See the [UseReviewInterface](/api-reference/magento-theme.usereviewinterface.html) for more information.
+
+## `useShipping`
+
+Allows loading the shipping information for the current cart and saving (selecting) other shipping information for the same cart.
+
+See the [UseShippingInterface](/api-reference/magento-theme.useshippinginterface.html) for more information.
+
+## `useShippingProvider`
+
+Allows loading the shipping provider for the current cart and saving (selecting) other shipping provider for the same cart.
+
+See the [UseShippingProviderInterface](/api-reference/magento-theme.useshippingproviderinterface.html) for more information.
+
+## `useStore`
+
+Allows loading and changing currently active store.
+
+See the [UseStoreInterface](/api-reference/magento-theme.usestoreinterface.html) for more information.
+
+## `useUiHelpers`
+
+Allows handling the parameters for filtering, searching, sorting and pagination in the URL search/query params.
+
+See the [UseUiHelpersInterface](/api-reference/magento-theme.useuihelpersinterface.html) for more information.
+
+## `useUiNotification`
+
+Allows managing and showing notifications to the user.
+
+See the [UseUiNotificationInterface](/api-reference/magento-theme.useuinotificationinterface.html) for more information.
+
+## `useUiState`
+
+Global store for managing UI state.
+
+See the [UseUiStateInterface](/api-reference/magento-theme.useuistateinterface.html) for more information.
+
+## `useUpsellProducts`
+
+Allows loading upsell products.
+
+See the [UseUpsellProductsInterface](/api-reference/magento-theme.useupsellproductsinterface.html) for more information.
+
+## `useUrlResolver`
+
+Allows searching the resolver for current route path (URL).
+
+See the [UseUrlResolverInterface](/api-reference/magento-theme.useurlresolverinterface.html) for more information.
+
+## `useUser`
+
+Allows loading and manipulating data of the current user.
+
+See the [UseUserInterface](/api-reference/magento-theme.useuserinterface.html) for more information.
+
+## `useUserAddress`
+
+Allows loading and manipulating addresses of the current user.
+
+See the [UseUserAddressInterface](/api-reference/magento-theme.useuseraddressinterface.html) for more information.
+
+## `useUserOrder`
+
+Allows fetching customer orders.
+
+See the [UseUserOrderInterface](/api-reference/magento-theme.useuserorderinterface.html) for more information.
+
+## `useWishlist`
+
+Allows loading and manipulating wishlist of the current user.
+
+See the [UseWishlistInterface](/api-reference/magento-theme.usewishlistinterface.html) for more information.
diff --git a/docs/getting-started/configure-integration.md b/docs/getting-started/configure-integration.md
index a6799cd81..89a911fc5 100644
--- a/docs/getting-started/configure-integration.md
+++ b/docs/getting-started/configure-integration.md
@@ -1,28 +1,16 @@
# Configuring Vue Storefront for Magento 2
-This guide explains the steps needed to install and set up Vue Storefront for Magento 2.
+This guide explains the steps needed to set up Vue Storefront for Magento 2.
## Prerequisites
-Before you can get started, you need the following:
+Before you can get started, you need:
-- **Node.js 16** installed,
+- Vue Storefront project created following the [Installation](/getting-started/installation.html) guide.
- Magento 2 server configured following the [Configuring Magento](/getting-started/configure-magento.html) guide.
-To check the Node version you are using, run the following command:
-
-```bash
-node -v
-```
-
## Creating the Vue Storefront for Magento 2
-To install Vue Storefront, run the command below. It will ask you for the project name and the integration of your choice. Keep in mind that the project name will also be used as the folder name, and be sure to select the Magento 2 integration.
-
-```sh
-npx @vue-storefront/cli init
-```
-
### 1. Configure environment variables
After installation, the first step is configuring the integration using the environment variables.
diff --git a/docs/getting-started/configure-magento.md b/docs/getting-started/configure-magento.md
index 122c92853..f394b7eff 100644
--- a/docs/getting-started/configure-magento.md
+++ b/docs/getting-started/configure-magento.md
@@ -4,7 +4,7 @@ This guide explains the step needed to install and set up Magento 2 store for Vu
## Prerequisites
-Before you can get started, you need the following:
+Before you can get started, you need:
- **Docker Desktop** to setup Magento 2 locally,
- **Magento Marketplace account** to download Magento 2. To create it, visit [this page](https://account.magento.com/customer/account/create/).
@@ -24,7 +24,7 @@ Registry that stores Magento and other third-party packages require authenticati
Follow the [Get your authentication keys](https://devdocs.magento.com/guides/v2.4/install-gde/prereq/connect-auth.html) guide to generate new access keys.
-
+
### 2. Install Magento 2 store
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
new file mode 100644
index 000000000..e39aff446
--- /dev/null
+++ b/docs/getting-started/installation.md
@@ -0,0 +1,66 @@
+# Installation
+
+[[toc]]
+
+## Prerequisites
+
+Before proceeding, make sure you have [Node 16](https://nodejs.org/en/) installed. You can check this by running the following command:
+
+```bash
+node -v
+```
+
+## Installation steps
+
+### Step 1: Generate a new project
+
+The easiest way to get started with Vue Storefront is to set up your project using our CLI. You can run it using the following command:
+
+```bash
+npx @vue-storefront/cli init
+```
+
+It will ask you to enter the project's name and select the e-commerce platform you wish to use. Once selected, the CLI will create project files in the directory matching your project name.
+
+::: warning
+CLI will use the project name you enter to create a new directory, so avoid using special characters and spaces.
+:::
+
+### Step 2: Install dependencies
+
+Go to the newly created directory and install the required dependencies:
+
+```bash
+cd