---
title: "Composables"
description: "Open or control Nuxt DevTools from your app with the useNuxtDevTools composable."
canonical_url: "https://nuxt.com/modules/devtools/composables"
---
# Composables

> Open or control Nuxt DevTools from your app with the useNuxtDevTools composable.

To open or control Nuxt DevTools from your application in development, use the auto-imported `useNuxtDevTools()` composable.

```vue
<script setup>
// A ref, whose value is undefined in production, during SSR, or until DevTools connects
const devtoolsClient = useNuxtDevTools() // Ref<NuxtDevtoolsHostClient | undefined>
</script>

<template>
  <button
    v-if="devtoolsClient"
    @click="devtoolsClient.devtools.navigate('/modules/components')"
  >
    <!-- Open the DevTools and navigate to the Components tab -->
    Open DevTools
  </button>
</template>
```

In `<script>`, reach the client through `.value`:

```ts
const devtoolsClient = useNuxtDevTools()

function openDevTools() {
  devtoolsClient.value?.devtools.open()
}
```

When you have auto-import disabled, import it explicitly:

```ts
import { useNuxtDevTools } from '#imports'
```

The client exposes:

- `devtools.open()`, `close()`, `toggle()` and `reload()` to drive the Vite DevTools panel, and `navigate(path)` to open a tab, for example `/modules/pages`.
- `app.navigate(path)` and `app.reload()` to drive your app.
- `inspector.enable()`, `disable()` and `toggle()` for the component inspector.
- `metrics`, the client hooks, plugins and loading times DevTools collects.

See [`NuxtDevtoolsHostClient`](https://github.com/nuxt/devtools/blob/main/packages/devtools-kit/src/_types/client-api.ts) for the full type.


## Sitemap

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