Copy link to headline:Vue Router integration

The onyx design system integrates with Vue Router(opens in a new tab) but also functions independently. When you use it with Vue Router, it includes the following features:

• When you pass links to components like the OnyxLink(opens in a new tab) or OnyxNavBar(opens in a new tab) components, the system opens internal links (such as /my-page) through the provided Vue router.
• The system uses native browser behavior for external links, internal links with target="_blank", or instances where no router is provided.
• The system automatically sets the active state of navigation and menu items based on the current route.
• Mobile flyouts for the navigation bar, such as the burger and context menus, close automatically when the current route changes. This happens, for example, when a user clicks a navigation item.

Copy link to headline:Setup

If you use the Nuxt module, the router setup is already configured.

To enable the Vue Router integration, pass your router instance when you create the plugin using createOnyx().

Use the onyx components to ensure that links are handled correctly. All button-like components, including navigation items, can function as either a link or a button. To implement this, set the link attributes using the link property.

Consider using one of these components:

• OnyxButton(opens in a new tab)
• OnyxIconButton(opens in a new tab)
• OnyxSystemButton(opens in a new tab)
• OnyxMenuItem(opens in a new tab)
• OnyxNavItem(opens in a new tab)

For more advanced use cases, use the headless alternatives: You can implement the unstyled OnyxRouterLink(opens in a new tab) or the useLink composable to build a custom link component.

Copy link to headline:Technologies

Querverweise auf unsere Technologien oder Ecosysteme verweisen: Blueprint + Nuxt, etc

Copy link to headline:Vue Router integration

onyx nicely integrates with the Vue Router(opens in a new tab) of your application. This brings the following features:

• when passing links to components (e.g. OnyxLink or OnyxNavBar), internal links like /my-page or opened via the provided Vue router. External links, internal links with target="_blank" or if no router is provided, will be opened using browser-native behavior.
• the active state of the OnyxNavItem and OnyxMenuItem will be automatically set depending on the current route
• mobile flyouts of the OnyxNavBar (burger and context menu) will automatically be closed when the current route changes (e.g. because the user has clicked a nav item)

Copy link to headline:Setup

Copy link to headline:Nuxt

If you are using the onyx Nuxt module, the router setup is already configured for you.

To enable the Vue Router integration with onyx, simply pass your router instance when creating the onyx plugin via createOnyx():