---
schema_version: "1"
id: dcbf3e38a19521c9ad094c8bc23f371f14064d4fe0d7706d4ef4482912039da1
title: lwr-outlet
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/references/csr-reference/lwr-outlet.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/lwr-outlet.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b8f73aef95b1fc89630164dc51624e5124ef15d29fce576c17e95e62297ef213
products:
  - Lightning Web Runtime
---
# lwr-outlet

An outlet dynamically renders view components, which display when an application navigates to a location.

## Properties

| Property      | Type    | Required/Optional | Description                                                                                                                                               |
| ------------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `view-name`   | String  | Optional          | The key of the [`ViewSet`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/routedestination.md#viewset) entry to display. The default value is `default`.                                                 |
| `refocus-off` | Boolean | Optional          | Refocusing is on by default for accessibility. If `refocus-off` is present, the outlet doesn't put the browser focus on the view component when it loads. |

## Events

An outlet component fires these [events](https://developer.salesforce.com/docs/platform/lwc/guide/events-handling.html):

- `onviewchange`
  - A handler for the `viewchange` event that is dispatched whenever the view component changes. `event.detail` is the view component class.

```javascript
type Constructor<T = object> = new (...args: any[]) => T;
interface Constructable<T = object> {
    constructor: Constructor<T>
}
interface ViewChangePayload {
    detail: Constructable;
}
```

- `onviewerror`
  - A handler for the `viewerror` event that is dispatched whenever the view component cannot be rendered. `event.detail` is the error and stack.

```javascript
interface ViewErrorPayload {
  detail: {
    error: Error,
    stack: string,
  };
}
```

### Usage

An outlet dynamically renders view components. The `lwr-outlet` Lightning web component displays the current view component in the DOM.

This process is naturally lazy. The view isn't imported until the outlet consumes it, so any unused views aren't fetched. When the router's view state changes, the outlet is flagged to display the vivew. At that point, if the view module hasn't been fetched already, there may be an async process to retrieve it.

```
<template>
    <lwr-router-container>
        <lwr-outlet refocus-off onviewchange={onViewChange} onviewerror={onViewError}>
            <div slot="error">View component cannot display</div>
        </lwr-outlet>
    </lwr-router-container>
</template>
```

It's possible for a [route definition handler](https://developer.salesforce.com/docs/platform/lwr/guides/lwr-route-handler-modules.md#1-the-router-calls-routedefinitionhandler) to return multiple views, like this:

```javascript
import type { Module, RouteHandlerCallback } from "lwr/router";

export default class HomeHandler {
  callback: RouteHandlerCallback;

  constructor(callback: RouteHandlerCallback) {
    this.callback = callback;
  }

  dispose(): void {}

  update(): void {
    this.callback({
      viewset: {
        // return multiple views
        default: (): Promise<Module> => import("my/home"),
        nav: (): Promise<Module> => import("my/homeNav"),
        footer: (): Promise<Module> => import("my/homeInfo"),
      },
    });
  }
}
```

You can use multiple outlets to display all the current view components by setting different `view-name` values.

```
<template>
    <lwr-router-container>
        <lwr-outlet view-name="nav"></lwr-outlet>
        <lwr-outlet><!-- default view --></lwr-outlet>
        <lwr-outlet view-name="footer"></lwr-outlet>
    </lwr-router-container>
</template>
```