![SurveyJS Logo](https://cdn-b.libhunt.com/images/promo-campaign-images/000/000/030/main.png?1674177924)
-
core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
In September 2020, Evan You, creator of the JavaScript library Vue.js, announced the stable release of Vue 3, labelled One Piece. Here at Suade Labs, we watched the announcement live and were very excited about the new features, including performance improvements, the Composition API, and the ability to teleport elements. These new features were exactly what we needed for our imminent projects and the Suade product, so we started getting to work and figuring out how to migrate our application. We could have waited for more dev resources like the Vue 2.6 migration build, but we wanted to start using these new features. So, we created a rough plan and got straight into it! This is how it worked out.
Finally, our biggest Vue 3 migration issue was the removal of the props sync feature and migrating them to use a v-model prop. Thankfully, we found the Vue Next Plugin which converted code from text.sync=”variable” to v-model:text=”variable”. This did a lot of the heavy lifting, but we also needed to change how components would interact with these props. Previously there was the ability to be able to change them directly, e.g. this.text = “new value”, however we now needed to migrate this to emit an event of change to the parent element. So, we added a new computed property that could handle a set function:
Another change we did as part of the Vue 3 Migration was migrate our use of /deep/ to ::v-deep() with our CSS. Using these deep selectors allows us to create queries in scoped CSS that target child components and elements. This also wasn’t a simple ‘find and replace’, as v-deep requires an argument of a selector , but /deep/ did not.