---
title: "useFeatures"
description: "useFeatures, auto-imported in the app: its options, return value and types."
canonical_url: "https://nuxt-backend.dev/docs/reference/api/use-features"
---
# useFeatures

## Interfaces

### UseFeaturesOptions

Defined in: [src/runtime/vue/composables/use-features.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="api">
        
      </a>
      
       <code>
        api?
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-backend.dev/docs/reference/api/use-billing#billingapi">
        <code>
          BillingApi
        </code>
      </a>
    </td>
    
    <td>
      Override the injected <code>
        api.billing
      </code>
      
       namespace (or the <code>
        getFeatures
      </code>
      
       ref).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts" rel="nofollow">
        src/runtime/vue/composables/use-features.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseFeaturesReturn

Defined in: [src/runtime/vue/composables/use-features.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="plans">
        
      </a>
      
       <code>
        plans
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Active product ids the user is subscribed to, or <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts" rel="nofollow">
        src/runtime/vue/composables/use-features.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="benefits">
        
      </a>
      
       <code>
        benefits
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="https://nuxt-backend.dev/docs/reference/api/use-billing#entitlementbenefit">
        <code>
          EntitlementBenefit
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Granted benefits (entitlements), or <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts" rel="nofollow">
        src/runtime/vue/composables/use-features.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       until features have loaded.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts" rel="nofollow">
        src/runtime/vue/composables/use-features.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="has">
        
      </a>
      
       <code>
        has
      </code>
    </td>
    
    <td>
      (<code>
        feature
      </code>
      
      ) => <code>
        boolean
      </code>
    </td>
    
    <td>
      Whether the user has the given benefit (matched by <code>
        benefitId
      </code>
      
      , grant <code>
        id
      </code>
      
      , <code>
        type
      </code>
      
      , or any metadata value).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts" rel="nofollow">
        src/runtime/vue/composables/use-features.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="hasplan">
        
      </a>
      
       <code>
        hasPlan
      </code>
    </td>
    
    <td>
      (<code>
        productId
      </code>
      
      ) => <code>
        boolean
      </code>
    </td>
    
    <td>
      Whether the user has an active subscription to the given product id.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts" rel="nofollow">
        src/runtime/vue/composables/use-features.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### useFeatures()

```ts
function useFeatures(options?): UseFeaturesReturn;
```

Defined in: [src/runtime/vue/composables/use-features.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-features.ts)

Reactive feature-gating for the current user — the SaaS access primitive.
Backed by the `getFeatures` query (the component's webhook-synced cache), so it
updates live as subscriptions/benefits change. Zero-arg via the auto-provided
`api.billing` namespace; pass `{ api }` to override.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#usefeaturesoptions">
        <code>
          UseFeaturesOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseFeaturesReturn`](#usefeaturesreturn)

#### Example

```vue
<script setup lang="ts">
const { has, hasPlan } = useFeatures()
</script>
<template>
  <PremiumPanel v-if="has('priority_support')" />
</template>
```


## Sitemap

See the full [sitemap](https://nuxt-backend.dev/sitemap.md) for all pages.