# yarn
yarn add @ant-design-vue/pro-layout@next
# npm
npm i @ant-design-vue/pro-layout@next -SFirst, you should add the icons that you need into the library.
import 'ant-design-vue/dist/antd.less';
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:
<template>
<pro-layout v-bind="state">
<router-view />
</pro-layout>
</template>
<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
collapsed: false,
openKeys: ['/dashboard'],
selectedKeys: ['/welcome'],
isMobile: false,
fixSiderbar: false,
fixedHeader: false,
menuData: [],
sideWidth: 208,
hasSideMenu: true,
hasHeader: true,
hasFooterToolbar: false,
setHasFooterToolbar: has => (state.hasFooterToolbar = has),
});
return {
state,
};
},
});
</script>or TSX
import { defineComponent, reactive } from 'vue';
import { RouterView } from 'vue-router';
import ProLayout from '@ant-design-vue/pro-layout';
export default defineComponent({
setup() {
const state = reactive({
collapsed: false,
openKeys: ['/dashboard'],
selectedKeys: ['/welcome'],
isMobile: false,
fixSiderbar: false,
fixedHeader: false,
menuData: [],
sideWidth: 208,
hasSideMenu: true,
hasHeader: true,
hasFooterToolbar: false,
setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),
});
return () => (
<ProLayout {...state} locale={(i18n: string) => i18n}>
<RouterView />
</ProLayout>
);
},
});npm run compile # Build library
npm run test # Runing Test