Ant Design Pro Layout

Install

# yarn
yarn add @ant-design-vue/[email protected]
# npm
npm i @ant-design-vue/[email protected] -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:

<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>
    );
  },
});

Build project

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