<h2>
  <a name="1-install-ant-degin-and-ant-design-icons-for-vue" href="#1-install-ant-degin-and-ant-design-icons-for-vue">
  </a>
  1. Install Ant degin and ant design icons for Vue
</h2>



<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>yarn add ant-design-vue @ant-design/icons-vue
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h2>
  <a name="2-create-a-new-file-named-raw-antdts-endraw-under-the-plugins-folder" href="#2-create-a-new-file-named-raw-antdts-endraw-under-the-plugins-folder">
  </a>
  2.  Create a new file named <code>antd.ts</code> under the plugins folder
</h2>

<p>Copy and paste this code inside<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight typescript"><code><span class="k">import</span> <span class="p">{</span><span class="nx">defineNuxtPlugin</span><span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">#app</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="dl">'</span><span class="s1">ant-design-vue/dist/antd.css</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">Antd</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">ant-design-vue</span><span class="dl">'</span><span class="p">;</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">Antd</span><span class="p">)</span>
<span class="p">})</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h2>
  <a name="3-register-your-newly-created-plugin" href="#3-register-your-newly-created-plugin">
  </a>
  3. Register your newly created plugin
</h2>



<div class="highlight js-code-highlight">
<pre class="highlight typescript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">defineNuxtConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">nuxt</span><span class="dl">'</span><span class="p">;</span>

<span class="c1">// https://v3.nuxtjs.org/api/configuration/nuxt.config</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span>
    <span class="na">plugins</span><span class="p">:[</span><span class="dl">'</span><span class="s1">@/plugins/antd</span><span class="dl">'</span><span class="p">]</span>
<span class="p">})</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h2>
  <a name="4-enjoy" href="#4-enjoy">
  </a>
  4. Enjoy 🚀
</h2>

<p>From now you can enjoy Ant design by running your nuxtjs development server:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>yarn dev
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>POV: </p>

<ul>
<li>The current plugin registers all components. If you want to register only a few or want to do any customization please refer to Ant design docs and update your <code>plugins/antd.ts</code>
</li>
<li>Yes, it adds typings</li>
</ul>

<h2>
  <a name="references" href="#references">
  </a>
  References
</h2>

<p><a href="https://github.com/nuxt/framework/discussions/1208#discussioncomment-3589542">https://github.com/nuxt/framework/discussions/1208#discussioncomment-3589542</a></p>



## 1. Install Ant degin and ant design icons for Vue
```sh
yarn add ant-design-vue @ant-design/icons-vue
```

## 2.  Create a new file named `antd.ts` under the plugins folder
Copy and paste this code inside
```ts
import {defineNuxtPlugin} from "#app";
import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd)
})
```

## 3. Register your newly created plugin
```ts
import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    plugins:['@/plugins/antd']
})
```

## 4. Enjoy 🚀
From now you can enjoy Ant design by running your nuxtjs development server:
```sh
yarn dev
```
POV: 
- The current plugin registers all components. If you want to register only a few or want to do any customization please refer to Ant design docs and update your `plugins/antd.ts`
- Yes, it adds typings

## References
https://github.com/nuxt/framework/discussions/1208#discussioncomment-3589542




1. Install Ant degin and ant design icons for Vue      yarn add ant-design-vue...