專案：結構化表單系統

使用 Nuxt3 建置

使用 NuxtUI 和付費版 NuxtUI Pro 建置

核心內容

結構化表單的生成(Schema)：依據規範下的 schema ，可生成預期中的表單結構。
結構化表單的驗證器(State Validator)：生成出的表單，會依據 schema 寫定的欄位規則，進行欄位的即時驗證，與送出表單時的全表單驗證。
結構化表單的應用(Prototype to Product)：本站主要模擬的流程，使用者可以選擇產品的原型、產品原型會生成自己的表單、依據需求編輯表單、儲存後便可建立出新的產品。
結構化表單的優勢(Customized)：可依據需求客製化表單的元件、驗證規則等。

全站流程

使用者 -> 開始建立產品 -> 選擇產品原型 -> 編輯產品表單 -> 儲存產品 -> 查看產品結果 -> 至產品列表 -> 進行產品管理
開發者(這個鏈暫時不會實踐) -> 開發產品原型 -> 建立原型結構化表單(Schema) -> 將原型上架 -> 儲存原型 -> 至原型列表 -> 進行原型管理

開發筆記

使用 vueuse 要看一下這裡，把 @vueuse/core 和 @vueuse/nuxt 直接裝在 dependencies。
使用 Vuelidate 的規則做驗證基礎並進行擴充，並沒有使用他的驗證器，本站的驗證器 State Validator 是參考他的結構而撰寫的。