Category: Vue

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Submenus

We can add a submenu with the a-sub-menu component:

<template>
  <div id="app">
    <a-menu
      style="width: 256px"
      :default-selected-keys="['1']"
      :open-keys.sync="openKeys"
      mode="inline"
      @click="handleClick"
    >
      <a-sub-menu key="sub1" @titleClick="titleClick">
        <span slot="title">
          <a-icon type="mail"/>
          <span>Navigation One</span>
        </span>
        <a-menu-item-group key="g1">
          <template slot="title">
            <a-icon type="qq"/>
            <span>Item 1</span>
          </template>
          <a-menu-item key="1">Option 1</a-menu-item>
          <a-menu-item key="2">Option 2</a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group key="g2" title="Item 2">
          <a-menu-item key="3">Option 3</a-menu-item>
          <a-menu-item key="4">Option 4</a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>
      <a-sub-menu key="sub2" [@titleClick](http://twitter.com/titleClick "Twitter profile for @titleClick")="titleClick">
        <span slot="title">
          <a-icon type="appstore"/>
          <span>Navigation Two</span>
        </span>
        <a-menu-item key="5">Option 5</a-menu-item>
        <a-menu-item key="6">Option 6</a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option 8</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub4">
        <span slot="title">
          <a-icon type="setting"/>
          <span>Navigation Three</span>
        </span>
        <a-menu-item key="9">Option 9</a-menu-item>
        <a-menu-item key="10">Option 10</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: ["mail"],
      openKeys: ["sub1"]
    };
  },
  watch: {
    openKeys(val) {
      console.log("openKeys", val);
    }
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },
    titleClick(e) {
      console.log("titleClick", e);
    }
  }
};
</script>

We can make the menu toggleable by adding a button:

<template>
  <div id="app">
    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
    </a-button>
    <a-menu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
    >
      <a-menu-item key="1">
        <a-icon type="pie-chart"/>
        <span>Option 1</span>
      </a-menu-item>
      <a-menu-item key="2">
        <a-icon type="desktop"/>
        <span>Option 2</span>
      </a-menu-item>
      <a-menu-item key="3">
        <a-icon type="inbox"/>
        <span>Option 3</span>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <span slot="title">
          <a-icon type="mail"/>
          <span>Navigation One</span>
        </span>
        <a-menu-item key="5">Option 5</a-menu-item>
        <a-menu-item key="6">Option 6</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title">
          <a-icon type="appstore"/>
          <span>Navigation Two</span>
        </span>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="9">Option 9</a-menu-item>
          <a-menu-item key="10">Option 10</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      collapsed: false
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    }
  }
};
</script>

The inline-collapsed prop is used to set whether the menu is collapsed or not.

We can also make it only open one submenu only bu writing:

<template>
  <div id="app">
    <a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
      <a-sub-menu key="sub1">
        <span slot="title">
          <a-icon type="mail"/>
          <span>Navigation One</span>
        </span>
        <a-menu-item key="1">Option 1</a-menu-item>
        <a-menu-item key="2">Option 2</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title">
          <a-icon type="appstore"/>
          <span>Navigation Two</span>
        </span>
        <a-menu-item key="3">Option 3</a-menu-item>
        <a-menu-item key="4">Option 4</a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option 6</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub4">
        <span slot="title">
          <a-icon type="setting"/>
          <span>Navigation Three</span>
        </span>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      rootSubmenuKeys: ["sub1", "sub2", "sub4"],
      openKeys: ["sub1"]
    };
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    }
  }
};
</script>

Set set the openKeys prop to the key prop value of the menu to open.

The openChange is emitted when we click on a submenu, so we can set the menu item to open there by getting the openKeys and setting it to the one that we clicked on.

Conclusion

We can add menus and submenus with Ant Design Vue.

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Space

We can add components with spacing with the a-space component.

For example, we can write:

<template>
  <div id="app">
    <a-space size="small">
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="link">Link</a-button>
    </a-space>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We set the size of the space with the size prop.

Affix

We make a component stick to a viewport with the a-affix component.

For example, we can write:

<template>
  <div id="app">
    <a-affix :offset-top="top">
      <a-button type="primary" @click="top += 10">Affix top</a-button>
    </a-affix>
    <br>
    <a-affix :offset-bottom="bottom">
      <a-button type="primary" @click="bottom += 10">Affix bottom</a-button>
    </a-affix>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      top: 20,
      bottom: 20
    };
  }
};
</script>

We make them stick to the top with the offset-top prop.

And we make the component stick to the bottom with the offset-bottom prop.

Breadcrumb

We can add a breadcrumb with the a-breadcrumb component.

For example, we can write:

<template>
  <div id="app">
    <a-breadcrumb>
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item>
        <a href>Application Center</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <a href>Application List</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can also add breadcrumb item with icons by writing:

<template>
  <div id="app">
   <a-breadcrumb>
    <a-breadcrumb-item href="">
      <a-icon type="home" />
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
      <a-icon type="user" />
      <span>Application List</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>
      Application
    </a-breadcrumb-item>
  </a-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

It also works with Vue Router.

For example, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import VueRouter from "vue-router";
Vue.use(Antd);
Vue.use(VueRouter);
Vue.config.productionTip = false;

const routes = [];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <a-breadcrumb :routes="routes">
      <template slot="itemRender" slot-scope="{ route, params, routes, paths }">
        <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
        <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
      </template>
    </a-breadcrumb>
    <br>
    {{ $route.path }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      basePath: "/components/breadcrumb",
      routes: [
        {
          path: "index",
          breadcrumbName: "home"
        },
        {
          path: "first",
          breadcrumbName: "first",
          children: [
            {
              path: "/general",
              breadcrumbName: "General"
            },
            {
              path: "/layout",
              breadcrumbName: "Layout"
            }
          ]
        },
        {
          path: "second",
          breadcrumbName: "second"
        }
      ]
    };
  }
};
</script>

to add breadcrumb with router-link components.

We put the router-link s into the itemRender slot to render them.

The routes prop takes an array of objects with the path , children and breadcrumbName properties.

Conclusion

We can add breadcrumbs for navigation with Ant Design Vue.

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Pagination

We can add pagination buttons with the a-pagination component.

For example, we can write:

<template>
  <div>
    <a-pagination v-model="current" :total="50" show-less-items/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: 2
    };
  }
};
</script>

We have the a-pagination component with the v-model directive to bind the current page clicked to a reactive property.

total is the total number of pages.

show-less-items makes the button bar display fewer buttons.

We can listen to the showSizeChange event that is emitted when page size changes:

<template>
  <div>
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    }
  }
};
</script>

current has the current page. pageSize has the page size.

Also, we can make the pagination buttons smaller with the size prop:

<template>
  <div>
    <a-pagination size="small" :total="50"/>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

And we can enable simple mode with the simple prop:

<template>
  <div>
    <a-pagination simple :default-current="2" :total="50"/>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can listen to the change event to watch for page changes:

<template>
  <div>
    <a-pagination :current="current" :total="50" @change="onChange"/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: 3
    };
  },
  methods: {
    onChange(current) {
      this.current = current;
    }
  }
};
</script>

The current parameter has the current page clicked.

The show-total prop lets us show the total by setting the prop to a function:

<template>
  <div>
    <a-pagination
      :total="100"
      :show-total="total => `Total ${total} items`"
      :page-size="20"
      :default-current="1"
    />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Steps

We can add a component to show steps with the a-steps component:

<template>
  <div>
    <a-steps :current="1">
      <a-step>
        <template slot="title">Finished</template>
        <span slot="description">This is a description.</span>
      </a-step>
      <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description."/>
      <a-step title="Waiting" description="This is a description."/>
    </a-steps>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The current prop sets the index of current step.

sub-title has the subtitle.

We can make it smaller with the with the size prop:

<template>
  <div>
    <a-steps :current="1" size="small">
      <a-step title="Finished"/>
      <a-step title="In Progress"/>
      <a-step title="Waiting"/>
    </a-steps>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Also, we can add the steps with icons:

<template>
  <div>
    <a-steps :current="1">
      <a-step status="finish" title="Login">
        <a-icon slot="icon" type="user"/>
      </a-step>
      <a-step status="finish" title="Verification">
        <a-icon slot="icon" type="solution"/>
      </a-step>
      <a-step status="process" title="Pay">
        <a-icon slot="icon" type="loading"/>
      </a-step>
    </a-steps>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can control the steps with the current prop:

<template>
  <div>
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
    </a-steps>
    <div class="steps-content">{{ steps[current].content }}</div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" [@click](http://twitter.com/click "Twitter profile for @click")="next">Next</a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        [@click](http://twitter.com/click "Twitter profile for @click")="$message.success('Processing complete!')"
      >Done</a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" [@click](http://twitter.com/click "Twitter profile for @click")="prev">Previous</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "First",
          content: "First-content"
        },
        {
          title: "Second",
          content: "Second-content"
        },
        {
          title: "Last",
          content: "Last-content"
        }
      ]
    };
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    }
  }
};
</script>

The button changes the current reactive property to move through the steps.

Conclusion

We can add steps display and pagination buttons to our Vue app with Ant Design Vue.

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Menu Theme

We can set the theme prop to change the menu theme:

<template>
  <div id="app">
    <a-menu
      style="width: 256px"
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      :theme="theme"
      :selected-keys="[current]"
      @click="handleClick"
    >
      <a-menu-item key="1">
        <a-icon type="mail"/>Navigation One
      </a-menu-item>
      <a-menu-item key="2">
        <a-icon type="calendar"/>Navigation Two
      </a-menu-item>
      <a-sub-menu key="sub1">
        <span slot="title">
          <a-icon type="appstore"/>
          <span>Navigation Three</span>
        </span>
        <a-menu-item key="3">Option 3</a-menu-item>
        <a-menu-item key="4">Option 4</a-menu-item>
        <a-sub-menu key="sub1-2" title="Submenu">
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option 6</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title">
          <a-icon type="setting"/>
          <span>Navigation Four</span>
        </span>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: "1",
      theme: "dark"
    };
  },
  methods: {
    handleClick(e) {
      console.log("click ", e);
      this.current = e.key;
    },
    changeTheme(checked) {
      this.theme = checked ? "dark" : "light";
    }
  }
};
</script>

Page Header

We can add a page header with the a-page-header component:

<template>
  <div id="app">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => null"
    />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We add the title and sub-title props to add the title and subtitles.

The back event is emitted when we click the back button.

We can add it with breadcrumbs with the breadecrumbs prop:

<template>
  <div id="app">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      :breadcrumb="{ props: { routes } }"
      sub-title="This is a subtitle"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      routes: [
        {
          path: "index",
          breadcrumbName: "First-level Menu"
        },
        {
          path: "first",
          breadcrumbName: "Second-level Menu"
        }
      ]
    };
  }
};
</script>

We can populate the extra slot of the a-page-header with our own content:

<template>
  <div id="app">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => $router.go(-1)"
    >
      <template slot="extra">
        <a-button key="2">Operation</a-button>
        <a-button key="1" type="primary">Primary</a-button>
      </template>
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="Created">james smith</a-descriptions-item>
        <a-descriptions-item label="Title">Writer</a-descriptions-item>
      </a-descriptions>
    </a-page-header>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We add the extra slot and populate it with buttons.

Also, we populate the default slot with the a-description component to add more content.

We can also set the background by setting the background color on the container and setting the ghost prop to false to show the background:

<template>
  <div style="background-color: #F5F5F5; padding: 24px;">
    <a-page-header
      :ghost="false"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => $router.go(-1)"
    >
      <template slot="extra">
        <a-button key="2">Operation</a-button>
        <a-button key="1" type="primary">Primary</a-button>
      </template>
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="Created">james smith</a-descriptions-item>
        <a-descriptions-item label="Title">Writer</a-descriptions-item>
      </a-descriptions>
    </a-page-header>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Conclusion

We can set a theme for menus and add a page header to our Vue app with Ant Design Vue.

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Header and Side Bar

We can add a header and sidebar together. For example, we can write:

<template>
  <div id="app">
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="logo"/>
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1">nav 1</a-menu-item>
          <a-menu-item key="2">nav 2</a-menu-item>
          <a-menu-item key="3">nav 3</a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="200" style="background: #fff">
          <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0 }"
          >
            <a-sub-menu key="sub1">
              <span slot="title">
                <a-icon type="user"/>subnav 1
              </span>
              <a-menu-item key="1">option1</a-menu-item>
              <a-menu-item key="2">option2</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title">
                <a-icon type="laptop"/>subnav 2
              </span>
              <a-menu-item key="3">option3</a-menu-item>
              <a-menu-item key="4">option4</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title">
                <a-icon type="notification"/>subnav 3
              </span>
              <a-menu-item key="5">option5</a-menu-item>
              <a-menu-item key="6">option60</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
          >Content</a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      collapsed: false
    };
  }
};
</script>

We put the a-layout-header component on top.

Then the a-layout contains the a-layout-sider with the sidebar.

a-sub-menu has the submenus.

The bottom a-layout has the content.

Header and Content

We can also add a header and content without the sidebar:

<template>
  <div id="app">
    <a-layout id="components-layout-demo-top" class="layout">
      <a-layout-header>
        <div class="logo"/>
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1">nav 1</a-menu-item>
          <a-menu-item key="2">nav 2</a-menu-item>
          <a-menu-item key="3">nav 3</a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content style="padding: 0 50px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">Ant Design</a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      collapsed: false
    };
  }
};
</script>

We just add the a-layout-content without the a-layout component.

Also, we can add the sidebar without the header:

<template>
  <div id="app">
    <a-layout id="components-layout-demo-responsive">
      <a-layout-sider
        breakpoint="lg"
        collapsed-width="0"
        [@collapse](http://twitter.com/collapse "Twitter profile for @collapse")="onCollapse"
        [@breakpoint](http://twitter.com/breakpoint "Twitter profile for @breakpoint")="onBreakpoint"
      >
        <div class="logo"/>
        <a-menu theme="dark" mode="inline" :default-selected-keys="['4']">
          <a-menu-item key="1">
            <a-icon type="user"/>
            <span class="nav-text">nav 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="video-camera"/>
            <span class="nav-text">nav 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="upload"/>
            <span class="nav-text">nav 3</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="{ background: '#fff', padding: 0 }"/>
        <a-layout-content :style="{ margin: '24px 16px 0' }">
          <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
        </a-layout-content>
        <a-layout-footer style="textAlign: center">Ant Design</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    onCollapse(collapsed, type) {
      console.log(collapsed, type);
    },
    onBreakpoint(broken) {
      console.log(broken);
    }
  }
};
</script>

Conclusion

We can add various layouts with Ant Design Vue.