Need help with pro-layout?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

151 Stars 91 Forks MIT License 173 Commits 32 Opened issues


easy use `Ant Design Vue` layout

Services available


Need anything else?

Contributors list

Ant Design Pro Layout

NPM version NPM downloads


# yarn
yarn add @ant-design-vue/pro-layout
# npm
npm i @ant-design-vue/pro-layout -S

Basic Usage

First, you should add the icons that you need into the library.

import { createApp } from 'vue'
import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';

const app = createApp();

app.use(ProLayout) .use(PageContainer) .mount('#app')

After that, you can use pro-layout in your Vue components as simply as this:


```tsx import { defineComponent, reactive } from 'vue'; import ProLayout, { createRouteContext, RouteContextProps } from '@ant-design-vue/pro-layout';

export default defineComponent({ setup () { const [ RouteContextProvider ] = createRouteContext();

  const state = reactive({
    collapsed: false,

openKeys: ['/dashboard'],
setOpenKeys: (keys: string[]) => (state.openKeys = keys),
selectedKeys: ['/welcome'],
setSelectedKeys: (keys: string[]) => (state.selectedKeys = keys),

isMobile: false,
fixSiderbar: false,
fixedHeader: false,
menuData: [],
sideWidth: 208,
hasSideMenu: true,
hasHeader: true,
hasFooterToolbar: false,
setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),


return () => ( ) }

}) ```

Build project

npm run compile # Build library
npm run test # Runing Test

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.