Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar

サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。

ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコンポーネントが揃っています。

サイトのキャプチャ

FormVuelar
FormVuelar -GitHub

FormVuelarの特徴

FormVuelarは、バックエンドから戻ってきたエラーを自動的に表示するように設計されたVue.jsのコンポーネントです。

サイトのキャプチャ
  • Laravelによって返されるエラーメッセージをそのまま使用できます。
  • Axiosの統合。
  • 検索機能付きselect要素。
  • チェックボックスのネスト。
  • 進捗表示を含むファイルのアップロード。
  • 画像プレビュー付きドロップゾーン。
  • エラーに対応したメッセージを表示。

FormVuelarのデモ

デモではベーシックなフォームをはじめ、セレクトボックス、チェックボックス、ファイルアップロード、ドロップゾーンを実際に試せます。

サイトのキャプチャ

デモページ: Basic

サイトのキャプチャ

デモページ: Prefilled

サイトのキャプチャ

デモページ: Selects

サイトのキャプチャ

デモページ: Checkbox

サイトのキャプチャ

デモページ: Upload

サイトのキャプチャ

デモページ: Dropzone

FormVuelarの使い方

インストール

NPM経由で当スクリプトをインストールします。

フォームのスタイル

フォームのスタイルは自由に定義できます。下記のコードでCSSをインポートできます。

フォームのテンプレート

フォームを作成し、postを使用してサーバーに送信します。

上記のフォームコンポーネントに渡すフォームオブジェクトは、下記のようになります。

ドキュメントも用意されています。

サイトのキャプチャ

FormVuelar Documentation

sponsors

top of page

©2019 coliss