---
product: "AG Studio"
title: "Standalone Layout"
description: "Use a standalone layout for a page that holds exactly one widget, which fills the page canvas."
framework: vue
version: "3.1.0"
related:
    - title: "Modes & Layout"
      url: "https://www.ag-grid.com/studio/vue/modes-layout/"
    - title: "Responsive Layout"
      url: "https://www.ag-grid.com/studio/vue/responsive-layout/"
    - title: "Theming"
      url: "https://www.ag-grid.com/studio/vue/theming/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/studio/vue/theme-builder/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/studio/vue/localisation/"
    - title: "Accessibility"
      url: "https://www.ag-grid.com/studio/vue/accessibility/"
    - title: "State"
      url: "https://www.ag-grid.com/studio/vue/state/"
    - title: "Figma Design System"
      url: "https://www.ag-grid.com/studio/vue/figma-design-system/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Standalone Layout

A standalone layout is a page layout for a page that holds exactly one widget. The widget fills the width and height of the page canvas, so it suits pages such as a full-page grid or a single detail chart.

#### Standalone Layout

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportHistory,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  AgStudioTheme,
  enableStudioDevValidations,
  studioTheme,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :theme="theme"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState | AgReportHistory>({
      pages: [
        {
          id: "a",
          layout: {
            type: "standalone",
          },
          widgets: {
            grid: {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
              sort: [
                {
                  field: { id: "medals.total", aggregation: "sum" },
                  direction: "desc",
                },
              ],
            },
          },
        },
      ],
      selectedPageId: "a",
      panels: {
        filters: { collapsed: true },
        edit: { collapsed: true },
        data: { collapsed: true },
      },
    });
    const mode = ref<AgStudioMode>("edit");
    const theme = ref<AgStudioTheme>(
      studioTheme.withParams({ studioMinWidth: 0, studioMinHeight: 0 }),
    );
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      theme,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Standalone Layout](https://www.ag-grid.com/studio/examples/standalone-layout/standalone-layout/vue3/)

## Setting a Standalone Layout

Set `type` to `'standalone'` in the `layout` of a page in the report state:

```ts
<ag-studio
    :initialState="initialState"
    /* other studio properties ... */>
</ag-studio>

this.initialState = {
    pages: [
        {
            id: 'medals',
            layout: {
                type: 'standalone',
            },
            widgets: {
                grid: {
                    type: 'grid',
                    dataMapping: {
                        cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
                    },
                },
            },
        },
    ],
    selectedPageId: 'medals',
};
```

To use a standalone layout for every page, set `type` in the Studio-wide [`layout`](https://www.ag-grid.com/studio/vue/modes-layout/#layout) property instead. A page's own `layout` takes precedence over the Studio-wide value. For a page that holds more than one widget, see [More Than One Widget](https://www.ag-grid.com/studio/vue/standalone-layout/#more-than-one-widget).

```ts
<ag-studio
    :layout="layout"
    /* other studio properties ... */>
</ag-studio>

this.layout = {
    type: 'standalone',
};
```

In a standalone layout:

- The widget cannot be moved or resized.
- The page's `widgetLayout` is not used, so it can be left out.
- The `columns` and `rowHeight` properties have no effect, because the widget is not placed on a grid.

## Width and Height

The outer Studio component has a default [Min Width](https://www.ag-grid.com/studio/vue/studio-theme/#reference-AgStudioCoreThemeParams-studioMinWidth) and [Min Height](https://www.ag-grid.com/studio/vue/studio-theme/#reference-AgStudioCoreThemeParams-studioMinHeight) of 600px. In a standalone layout, consider overriding the `studioMinWidth` and `studioMinHeight` theme parameters (for example, setting them to `0`) to avoid double scrollbars when the widget fills the page.

### Canvas Width

A standalone layout takes its default canvas width from two theme parameters, in place of the [Canvas Min Width](https://www.ag-grid.com/studio/vue/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasMinWidth) and [Canvas Max Width](https://www.ag-grid.com/studio/vue/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasMaxWidth) used by other pages:

- [Canvas Standalone Min Width](https://www.ag-grid.com/studio/vue/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasStandaloneMinWidth) (`studioCanvasStandaloneMinWidth`) defaults to `0`, so there is no minimum width.
- [Canvas Standalone Max Width](https://www.ag-grid.com/studio/vue/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasStandaloneMaxWidth) (`studioCanvasStandaloneMaxWidth`) defaults to the value of `studioCanvasMaxWidth`, which has no maximum unless set.

The `minWidth` and `maxWidth` layout properties override these theme parameters. A value set on the page is used first, then a value set in the Studio-wide `layout` property, then the theme parameter.

## More Than One Widget

A page with a standalone layout must hold exactly one widget. This applies whether the page sets the layout in its own `layout` or inherits it from the Studio-wide `layout` property.

When such a page holds more than one widget, Studio reports a state error and shows only the first widget. What happens to the other widgets in the report state depends on the mode:

- In edit mode, they are removed from the report state.
- In view mode, they are kept in the report state but are not shown, and the state error is fatal.

See [Invalid State](https://www.ag-grid.com/studio/vue/state/#invalid-state) for how to handle state errors.