2022.12.10この記事は約2分で読めます。今回はvue3にも対応しているprimevueというフレームワークを使ってデザインをしてみます。primevueですが、GitHubのスター数を見ると以下のようになってます。MIT他のUIフレームワークと比較してみました。知られているveutifyと比べるとスター数は決して多くはないのですが、primevueは用意されているコンポーネントが多く、個人的にお気に入りのUIフレームワークの1つです。それでは、Nuxt3に導入して使ってみます。参考リンクインストールprimeflexというCSSライブラリも一緒にインストールします。--save設定プラグイン設定vueプラグインとして設定します。AvatarGroup)})上記では、使用するコンポーネントをimportして、vueコンポーネントとして使えるように登録しています。コンポーネントが内部で参照しているメッセージ表示のために一部Locale設定が必要です。コンポーネントを使用してエラーになるようであれば、都度Localeを編集すれば良いと思います。参考:https://primefaces.org/primevue/localeテーマ設定デフォルトで使用できるテーマがいくつかあります。以下では、saba-blueというテーマを設定しています。テーマを変えたい場合は、nuxt.config.tsのcssセクションで該当するテーマのcssを指定すれば変更できます。テーマ"primevue/resources/primevue.css","primeicons/primeicons.css","primeflex/primeflex.css",],});primevueのコンポーネントを使ってみます。auto;}</style>参考ソース:https://primefaces.org/primevue/dividerサンプルを表示すると、以下のような感じで表示されることを確認できます。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3でgoogle-fontsを使う異なるデバイスでもフォントを統一かつ綺麗で見やすいフォントを使いたい。今回はNuxt3でGoogleフォントを使う方法について記述します。3.0.0-...NuxtJSnuxt3のserver/apiで認証済みか否かをチェックするはじめに前回Nuxt3の@sidebase/nuxt-authで認証処理を作成しました。今回はserver/apiやmiddlewareで認証済みかチェックする処理を作ります。パターン以下3つのパターンで書いてみます。最近はフロントエンド開発の技術に触れています。NuxtJSのSSRモードで、storeのnuxtServerInitアクションの実行について勘違いしてしまっていた。webglを簡単に組み込みできるnpmモジュールを書いてみました。unityのwebglビルドを配置してコンポーネントを指定するだけです。自作のmoduleを作成するはじめにUI/UXの設計やプロトタイプ作成してイメージを具現化し仮説検証していくプロセスを効率的に回せるようになりたいという目的でフロントエンドを触り出してから、NuxtJSを学んでいます。ページごとにタイトルを変えるNuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。useHeadとtitleTemplateを使うapp.vueでtitleTemplateを使います。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。