Nuxt.js ライブラリ集

Nuxt.jsで使用できるライブラリを掲載してます。環境構築に関するリンクも掲載してます。

環境構築・使い方など

• nuxt.jsを使用してみる
• yarn dev(npm start)時にポートを変更する
• middlewareの簡単な使い方
• 404エラーページを作成する
• nuxt-childを利用して共通ヘッダーを作成する
• titleタグを各ページごとに「サイト名 + 任意の文字列」に設定
• 多言語対応Nuxt-i18nの簡単な使い方
• yarn start時に外部IPから接続できるように設定する
• バージョン確認方法
• Nuxt.jsで実装したWebサイトをNetlifyにデプロイする手順

開発系

• Electron-Nuxt.jsをインストールする
• Electron-Nuxt.jsでクライアントPCの情報を取得するアプリを作成する
• Electron-Nuxt.jsでプライベートIPを取得するアプリを作成する
• Electron-Nuxt.jsでjsonファイルを利用して、通知を行う
• axiosを使用してAPI接続しJSONデータを取得する
• WebApiをaxiosと@nuxtjs/proxyを使って取得する
• サーバーのIPアドレス(V4)一覧を表示するサンプル

ライブラリ集

カルーセル

• 「vue-splide」を使用してカルーセルを実装する
• 「vue-snap」をインストールしてタッチ操作可能なカルーセルを実装する

スライダー

• 「vue-ellipse-progress 」をインストールしてスライダーを実装する
• 「vue-slider-component」をインストールしてスライダーを実装する
• 「vueperslides」をインストールしてタッチ操作に対応したスライダーを実装する
• 「vue-slide-bar」をインストールしてスライダーを使用する
• 「vue-round-slider」を使用してラウンドスライダーを実装する
• 「vue-spinner」をインストールしてスライダーを実装する
• 「c-swipe」を使用してタッチ操作でスライドさせる
• 「vue-slide-bar」を使用してスライダーコントロールを実装する

ツールバー・メニュー

• 「vue-js-toolbar」をインストールして移動可能なツールバーを実装する
• 「vue-file-toolbar-menu」をインストールしてツールバーメニューを実装する
• 「vue-sidebar-menu」をインストールしてサイドバーメニューを実装する
• 「vue-quick-menu」をインストールしてRadial Menuを表示する
• 「vue-tasty-burgers」を使用してハンバーガーメニューを実装する
• 「vue-burger-button」を使用してハンバーガーメニューにアニメーションをかける
• 「vue-simple-context-menu」を使用して左クリックや右クリックでコンテキストメニューを表示する
• 「bottom-navigation-vue」を使用してボトムにナビゲーションを作成する

スクローラー

• 「vue-list-scroller」をインストールしてTwitter風の無限スクローラーを実装する
• 「vue-horizontal-list」をインストールしてタッチ対応な水平スクローラーを実装する

ローダー

• 「vue-ui-preloader」をインストールしてアニメーション化されたローダーを実装する
• 「vue-load-image」をインストールしてローダーを表示する

テーブル

• 「vue-good-table」をインストールして検索可能なテーブルを実装する
• 「vuejs-spreadsheet」をインストールしてEXCEL風のテーブルを実装する
• 「vue-table-dynamic」を使用してテーブルを実装する

テキスト

• 「vue-hacker-text」をハッキングされたようなエフェクトをテキストにかける
• 「vue-text-highlight」を使用してテキストをハイライト表示する
• 「vue-typical」を使用してテキストにエフェクトをかける
• 「vue-good-links」を使用してテキストにエフェクトをかける
• 「vue-scrollin」を使用してテキストを文字列でスクロールする
• 「vue-highlight-words」を使用して指定した文字列をハイライト表示する

デザイン系その他

• 「v-movable」を使用して移動可能な要素を実装する
• 「v-drag」を使用してドラック可能な要素を実装する
• 「vue-moveable」を使用してドラッグ、サイズ変更、回転可能な要素を作成する
• 「vue-tabs-with-active-line」を使用してtabを実装する
• 「vue-notification-bell」を使用してベル型のnotificationを実装する
• 「vue-flipper」を使用して要素をめくるようなエフェクトをかける
• 「vue-multi-split-pane」を使用してマルチスプリットペインを実装する
• 「vue-confirmation-button」を使用してボタンクリック時に確認メッセージを表示する
• 「vue-simple-accordion」を使用してアコーディオンを実装する
• 「vue-accordion」を使用して水平タイプのアコーディオンメニューを実装する
• 「vue-grid-responsive」をインストールしてグリッドシステムを実装する
• 「vue-drag-resize」をインストールして要素をドラッグやリサイズする
• 「vue-ins-progress-bar」をインストールしてInstagram風のプログレスバーを実装する
• 「vue-spin-wheel」をインストールしてタッチ操作可能なスピンホイールを実装する
• 「vue-faq-accordion」を使用してFAQのデザインを簡単に制作する
• 「vue-tour」をインストールしてナビツアーを実装する
• 「vue-share-it」を使用してSNSボタンを実装する
• 「vue-rocker-switch」を使用してスイッチ側のボタンを実装する
• 「vue-collapse-transition」を使用してcollapseを実装する
• 「vue-toastification」を使用してトーストを表示する
• 「vue-list-picker」を選択したリストを取得する
• 「vue-closable」を使用してボタンクリックでポップアップを表示する
• 「vue-cobra」を使用してスクロールの長さをインジゲーター表示する
• 「vue-multiselect-listbox」をインストールして複数選択可能なデュアルリストボックスを実装する
• 「vue-toggles」をインストールしてトグルを実装する
• 「vuetrend」を使用してデータを綺麗に視覚化する
• 「vue-tinybox」をインストールしてlightbox galleryを実装する
• 「vueye-timeline」をインストールしてタイムラインを実装する
• 「timeline-vuejs」を使用してタイムラインを表示する
• 「vue-timeline-component」を使用してタイムラインを作成する
• 「@vue-a11y/dark-mode」を使用してダークモードを実装する
• 「vue-sliding-pagination」を使用してスライド式のページャーを実装する
• 「vue-chat-emoji」をインストールして絵文字を表示する
• 「vue-kinesis」を使用してアニメーションをかける
• 「vue-digital-transform」を使用して数字にアニメーションをかける
• 「animated-number-vue」を使用して数字にエフェクトをかける
• 「nuxt-webfontloader」を使用してgoogle fontsを利用する
• 「vue-wordcloud」を使用してWord Cloudを実装する
• 「vue-switches」を使用して様々なタイプのスイッチを実装する
• 「Vue Sticker」を利用してスッテカーのような動作を画像にさせる

フォーム系

• 「vue-selectize」を使用してselectboxを作成する
• 「vue-picker」を使用してselectboxを実装する
• 「v-chips-multiselect」をインストールして複数選択が可能なselectboxを実装する
• 「vue-typeahead-bootstrap」をインストールしてオートコンプリートを実装する
• 「vue-autosize-input」を使用してテキストフィールドを可変にする
• 「vue-fake-input」をインストールして文字列を分割して1文字ずつ入力する
• 「vue-eva-input」を使用してデザイン性の高い入力フォームを実装する
• 「vue-mention」を使用してメンション（Mentions）機能を実装する
• 「vue-input-facade」を使用して入力フィールドに入力マスクを適応する
• 「vue-cascader-select」を使用して階層化できるセレクトメニューを実装する
• 「vue-loading-checkbox」を使用してチェックボックスにloadingをかける

日付系

• 「vue-ctk-date-time-picker」を使用してDate Time Pickerを実装する
• 「vue-englishdatepicker」をインストールして日付ピッカーを実装する
• 「Moment.js」を使って日付処理を行う手順
• 「vue-date-dropdown」を使用してドロップダウンの日付ピッカーを実装する
• 「vue-month-picker」をインストールしてシンプルなマンスピッカーを実装する
• 「vue-persian-datetime-picker」をインストールしてペルシャ日付の日付ピッカーを実装する
• 「@chenfengyuan/vue-countdown」をインストールしてシンプルなカウントダウンを実装する
• 「vue-ctk-date-time-picker」を使用してDate Time Pickerを実装する
• 「vue-datepicker」をインストールしてシンプルなデートピッカー(日付選択)を実装する
• 「vue-clock」を使用してデジタル時計を実装する
• 「vue-clock2」を使用してアナログ時計を表示する
• 「vue-clock-picker」を使用してアナログ時計型のデータピッカーを実装する
• 「vuemodoro」を使用してタイマー機能を実装する
• 「day.js」を使って日付処理を行う手順

UI

• UIコンポーネント「semantic-ui-vue」をインストールして使ってみる
• 「vue-dashboard-vd」をインストールしてダッシュボードを実装する
• 「vant」をインストールしてモバイルフレンドリーUIを利用する
• UI framework Buefyを使ってみる

動画・画像・オーディオ

• 「@diracleo/vue-enlargeable-image」をインストールしてサムネイルから画像を拡大する
• 「v-video-embed」をインストールしてyoutube等の動画を埋め込む
• 「vue-go-top」を使用して画像にエフェクトかける
• 「vue-image-effect」を利用して画像にエフェクトかける
• 「vuejs-clipper」を使用して画像をクリッピングする
• 「vue-upload-drop-images」を使用してドラッグアンドドロップ画像アップロードする
• 「v-spotlight」を使用して画像をスポットライト表示する
• 「vue-twentytwenty」を使用して画像を分割して表示する
• 「vue-gallery-slideshow」を使用して画像のGalleryとSlideshowを実装する
• 「vue-select-image」を使用してリストから画像を複数選択できるようにする
• 「vue-audio-visual」を使用してオーディオを視覚化する
• 「vue-core-video-player」をインストールして軽量のビデオプレーヤーを実装する
• 「vue-audio-mixer」を使用してオーディオミキサーを実装する

エディタ

• 「vue-editor」を使用してリッチテキストエディタを実装する
• 「mavon-editor」を利用してマークダウンエディタを構築する
• 「vue-markdown-editor」を使用してマークダウンエディタを実装する
• 「vue-cron-editor-buefy」を使用してcron editorを実装する
• 「simple-m-editor」を使用してシンプルなmarkdownエディタを作成する

アイコン

• 「vue-unicons」を使用してSVGアイコンを利用する
• 「vue-heroicons」をインストールしてSVGアイコンを利用する

チャート

• 「vue-chartkick」を使用して様々な種類のチャートを実装する
• 「pure-vue-chart」を使用してチャートを実装する
• 「vue-ganttastic」をインストールしてガントチャートを実装する
• 「vue-doughnut-chart」を使用してドーナツチャートを実装する
• 「dr-vue-echartsを」使用してカラフルなチャートを実装する
• 「@ssthouse/vue-tree-chart」を使用してツリーチャートを実装する
• 「flowchart-vue」をサイト上でフローチャートを作成する
• 「vue-chartjs」使用してグラフを作成する

カウンター

• 「v-number」を使用してアニメーションカウンターと、likeカウンターを実装する
• 「vue-long-click」を使用して長押ししてカウンターが変動するボタンを実装する

その他

• 「vue-currency-directive」をインストールして通貨フォーマットを設定する
• 「vue-diagram-editor」を使用してダイアグラムを作成する
• 「vue-simple-search-dropdown」を使用してシンプルなドロップダウンリストを作成する
• 「vue-json-excel」を使用してjsonデータからEXCELファイルを作成する
• 「vuex-persistedstate」を使ってLocal Storageにデータを保存する
• 「link-prevue」を使用して指定したURLのサイトプレビューを表示する
• 「@nuxtjs/sitemap」を使ってsitemap.xmlを生成する手順
• 「vue-paycard」を使用してクレジットカードを表示する
• 「v-avatar」を利用してアバターを実装する
• 「vue-browser-detect-plugin」を使用して利用されているブラウザの検出結果を表示する
• 「he-tree-vueを使用してtree上でドラッグアンドドロップを可能にする
• 「vue-roller」を使用して文字列にアニメーションをかける
• 「vue-modaltor」を使用してモーダルを作成する
• 「vue-code-highlight」を使用してソースコードをハイライト表示する
• 「vue-coverflow」を使用してapple製品のアニメーションcover flowを実装する
• 「vue-poll」を使用して投票ツールを実装する
• 「vue-pincode-input」を使用してピンコードを実装する
• 「vue-smart-widget」を使用してコンテナコンテンツを実装する
• 「vue-social-share」を使用してSNSボタンを実装する
• 「vue-step-progress-indicator」を使用してプログレスインジケータを作成する
• 「trading-vue-js」をインストールしてJSONツリービューアを実装する
• 「v-wave」を使用してリップルボタンを作成する
• 「vue-org-tree」を使用して組織図を実装する
• 「vue-ultimate-skeleton-cards」をインストールしてスケルトンカードを作成する
• 「vue-context」をインストールしてコンテキストメニューを実装する
• 「vue-confetti」をインストールして紙吹雪アニメーションを実装する
• 「vue-drag-tree」をインストールしてドラッグアンドドロップ可能なツリーを実装する
• 「@chenfengyuan/vue-barcode」を使用してバーコードを作成する
• 「vue-barcode」を使用してバーコードをサイトに表示する
• 「simple-syntax-highlighter」をインストールしてSyntax Highlighterを実装する
• 「vue-scratchable」を使用してスクラッチを実装する
• 「vue-color-gradient-picker」をインストールして高機能なカラーピッカーを実装する
• 「vue-accessible-color-picker」を使用してアクセシブルなカラーピッカーを実装する
• 「radial-color-picker」を使用してカラーピッカーを実装する
• 「vue-knob」を使って値を表示したノブを実装する
• 「vue-masonry-wall」を使用して要素を無限に表示する
• 「vue-instagram-embed」をインストールしてインスタグラムの投稿を表示(埋め込み)する
• 「vuesence-sliding-header」をインストールしてスティッキーヘッダーを実装する
• 「vue-svg-map」をインストールして地図を表示する
• 「vue-shell 」をweb上にターミナルを実装する
• 「vue-card-stacke」を使用してスワイプ可能なカードを実装する
• 「trading-vue-js」をインストールして株価チャートを実装する
• 「vgauge」を使用してメーターを実装する
• 「vue-fabric-wrapper」を使用して、stick man(棒人間)と呼ばれるものを作成する

エラー

• yarn dev時に「To install them, you can run: npm install –save core-js/modules/es.array.concat」が発生した場合の対処法
• yarn dev時に「To install them, you can run: npm install –save core-js/modules/es6.array.find」が発生した場合の対処法
• Client bundleが進行しない時の対処法
• エラー「Module not found: Error:Can’t resoleve ‘less-loader’」が発生した場合の対処法
• error and 0 warnings potentially fixable with the ‘-fix’ optionが発生した場合の対応方法
• エラー「window is not defined」が発生した場合の対応方法
• エラー「Enable vuex store by creating store/index.js.」発生時の対応方法
• エラー「error Delete `␍` prettier/prettier」が発生した場合の対処法
• This dependency was not found:発生時の対応
• Elements in iteration expect to have ‘v-bind:key’ directives vue/require-v-for-keyが発生時の対処法