Hapicode

# Nuxtjs 3 に Ant design Vue を使う

最新の Ant Design Vue 4.x をインストール

yarn add ant-design-vue@4.x

plugins/antd.ts プラグインファイルを作成

import { defineNuxtPlugin } from "#app";
import "ant-design-vue/dist/reset.css";
import Antd from "ant-design-vue";

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

nuxt.config.tsにプラグインを登録する

export default defineNuxtConfig({
  plugins: ["@/plugins/antd"],
});

これで使えるようになりました

<template>
  <a-button>Button</a-button>
</template>
<script>
import { Button } from "ant-design-vue";

export default {
  components: {
    AButton: Button,
  },
};
</script>

以上！

2024-05-09
  • nuxtjs
  • vuejs

関連記事

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
polyfill という宝物で開発時の ie11 対応した時のメモ
Nuxtjs build WARNING in entrypoint size limit

Nuxtjs build で entrypoint size limit warning エラー発生...

Nuxtjs axios リクエストのヘッダー設定

Nuxtjs axios 通信毎に onRequest に header 設定したい...

Nuxt.js でフロントエンドのカテゴリ選択

バックエンドLaravelとフロントエンドNuxtjsでカテゴリーの一覧表示と選択したら子カテゴリー...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

Nuxtjs に iview 4.0 入れた動かしてみた

日本には普及していない iview がバージョン 4.0 リリースしました。UI フレームワークを ...

Nuxt.js の config に i18n 書いたら type エラーで怒られた

vuejs3 nuxtjsでi18nを使ってみたらNuxtConfig type error発生しま...

web 開発でよく使うリダイレクトと nuxtjs redirect

リダイレクトコード、恒久リダイレクト一時的リダイレクトのいろいろをまとめました。...

nuxtjs のページごと head の title description 変更

nuxtjsのhead内titleとdescription動的変更してSEOパワーアップしていこう！...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

nuxtjs の wpa を実装した時のメモ

3分でできるnuxtjs使ってwpa設定 @nuxtjs/wpaモジュール入れて設定追加して画像一枚...

Nuxtjs titleTemplate の設定

Nuxtjsのheadにtitleのtemplate使って設定する方法...

楽天 GOLD に Nuxt で作った HP デプロイ公開した話

楽天GOLDにNuxtjs製HPデプロイ公開!楽天GOLDのFTP操作とNuxtjsで作成したページ...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説 よく使われる v-if と v-show の...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
localStorage is not defined に遭遇した時の対応

nuxtjsのssrモードでlocalStorage is not definedエラーに遭遇！...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...