First steps

This guide assumes you have completed the basic setup. If not, follow the installation guide first.

Copy link to headline:Layout

We strongly recommend using the app and page layout components to structure your application. They provide consistent layout structures, correct scroll container management, and system-level components.

1. App layout

   The app layout is placed once at the root of your application. It serves as the shell for global navigation and main content, while hosting system-level components like toasts and notifications.

   VueNuxt

   App.vue

   app/app.vue
2. Page layout

   Use page layout on every page to ensure standardized spacing and scroll containers. It provides dedicated slots for sidebars, footers, and page content.

   VueNuxtFigma

   views/HomeView.vue

   In Nuxt, create a Nuxt layout(opens in a new tab) to define the structure across pages. You can also add a global footer here. For custom pages, pass props to the layout(opens in a new tab) or override the layout(opens in a new tab).

   app/layouts/default.vue

   Create a new frame sized for your project (e.g. Full HD, 1920x1080px). Apply the onyx/color/base/background/tinted variable as the fill color so the background adapts across light and dark modes.

Copy link to headline:Grid settings

Configure your application grid by defining a maximum width and alignment early on.

On wide screens, stretching content across the full width impairs readability. We recommend capping content at 1920px (the lg breakpoint) with center alignment. Apply these utility classes to your root component:

For all options, see the: