Review Vue 3.0 Composition Functions, Report back to team

[ghost]

We want to make a decision as to our future development approach within Vue:

• Templates
• Classes
• Composition Functions

Please review and make a recommendation at our next team meeting

[ghost]

Vuejs Composition Functions:

https://github.com/vuejs/rfcs/pull/17?utm_campaign=Vue.js%20News&utm_medium=email&utm_source=Revue%20newsletter#issuecomment-494242121

[melinashak-noaa]

Currently reading through documentation on the new Vue Composition API:
https://vue-composition-api-rfc.netlify.com/#basic-example
https://vue-composition-api-rfc.netlify.com/api.html

Composition API plugin we can experiment with: https://github.com/vuejs/composition-api/

Examples:

• https://gist.github.com/yyx990803/762ec427882a61be3e4affe02f8af555
• https://github.com/LinusBorg/composition-api-demos?utm_campaign=Vue.js%20News&utm_medium=email&utm_source=Revue%20newsletter

Here's the most recent RFC's (request for comments)
vuejs/rfcs#78

And here's an older one along with it's documentation
vuejs/rfcs#42 (comment)
https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md

Useful Video and Articles:
https://www.youtube.com/watch?v=F_JsJexRRls
https://www.youtube.com/watch?v=_LLUdzTIpBA&t=536s
https://medium.com/js-dojo/test-driving-the-vue-function-api-b95bb37fd663

[melinashak-noaa]

Going to experiment with the composition api by installing the plugin and modifying a few components to use this new syntax and see how it goes.

[melinashak-noaa]

Modified tripDetails page in ashop to use composition style and it's working successfully. Here's working PR #918. Still figuring out how things will work with state, but so far mostly working. This is how they plan to implement state or how it's working so far vuejs/composition-api#8

[melinashak-noaa]

quick presentation for team: https://docs.google.com/presentation/d/18issdqbG5Dg-DlH0-d1FyuIFeqeGZ1aC7YgR45ZJcQ8/edit?usp=sharing