Vue.js: Difference between revisions

Browse history interactively

← Previous edit

Content deleted Content added

VisualWikitext

Revision as of 09:58, 18 March 2017 edit Mortense (talk \| contribs) Extended confirmed users 11,803 edits m →React: Grammar. ← Previous edit		Latest revision as of 02:34, 5 August 2025 edit undo BattyBot (talk \| contribs) Bots 1,957,349 edits m Combined portal templates and other General fixes Tag: AWB
(414 intermediate revisions by more than 100 users not shown)
Line 1: {{short description\|Open-source JavaScript library for building user interfaces}} ~~{{Multiple issues\|~~ {{~~COI~~Primary sources\|date=~~March~~July ~~2017~~2019}} {{~~copy~~Use ~~edit~~mdy dates\|date=~~March~~August ~~2017~~2019}} }} {{Infobox software \| name = Vue.js \| logo = ~~[[File:Vue.png\|215px\|~~Vue.js ~~logo]]~~Logo 2.svg \| logo_size = 120px \| logo_upright = yes \| author = Evan You \| ~~released~~developer = ~~{{Start~~Evan ~~date~~You and ~~age\|2014\|2}}~~the Core Team<ref>{{~~Cite~~cite web \|url=~~http~~https://~~blog~~vuejs.~~evanyou.me~~org/~~2014/02/11/first-week-of-launching-an-oss-project~~about/team \|title=~~First Week of Launching~~ Vue.js \|website=~~Evan You~~vuejs.org}}</ref> \| released = {{Start date and age\|2014\|2}}<ref>{{cite web \|url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/ \|title=First Week of Launching Vue.js \|website=Evan You \|access-date=March 11, 2017 \|archive-date=February 5, 2019 \|archive-url=https://web.archive.org/web/20190205111451/https://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/ \|url-status=live }}</ref> ~~\| latest release version = 2.2.2~~ \| latest release version = {{wikidata\|property\|reference\|edit\|P348}} ~~\| latest release date = {{Start date and age\|2017\|3\|9}}<ref>{{cite web\|url=https://github.com/vuejs/vue/releases\|title=Vue.js Releases\|website=GitHub}}</ref>~~ \| latest release date = {{Start date and age\|{{wikidata\|qualifier\|P348\|P577}}}} ~~\| status = Active~~ \| programming language = [[~~JavaScript~~TypeScript]] \| platform = [[~~Cross-~~Web platform]] \| included with = [[Laravel]] ~~\| size = 76 KB production<br>240 KB development~~ \| size = 33.9 KB [[Minification (programming)\|min]]+[[gzip]]<ref>{{cite web \|title=@vue/runtime-dom v3.2.45 \|url=https://bundlephobia.com/package/@vue/runtime-dom \|access-date=2023-01-29 \|website=Bundlephobia \|language=en \|archive-date=January 29, 2023 \|archive-url=https://web.archive.org/web/20230129213124/https://bundlephobia.com/package/@vue/runtime-dom \|url-status=live }}</ref> \| genre = [[JavaScript library]] \| license = [[MIT License]]<ref name="license">{{cite web \|title=vue/LICENSE \|url=https://github.com/vuejs/core/blob/dev/LICENSE \|via=GitHub \|work=Vue.js \|access-date=April 17, 2017}}</ref> ~~\| license = [[MIT License]]~~ }} '''Vue.js''' (commonly referred to as '''Vue'''; pronounced "view"<ref name="introduction">{{cite web \|title=Introduction \|url=https://vuejs.org/guide/introduction.html \|website=Vuejs.org \|access-date=January 3, 2020 \|language=en \|archive-date=February 10, 2022 \|archive-url=https://web.archive.org/web/20220210104313/https://vuejs.org/guide/introduction.html \|url-status=live}}</ref>) is an open-source [[model–view–viewmodel]] front end [[JavaScript framework]] for building [[user interface]]s and [[single-page application]]s.{{refn\|<ref>{{cite book \|last1=Macrae \|first1=Callum \|title=Vue.js: Up and Running: Building Accessible and Performant Web Apps \|date=2018 \|publisher=[[O'Reilly Media]] \|isbn=978-1-4919-9721-5 \|url=https://books.google.com/books?id=bJpNDwAAQBAJ \|language=en \|access-date=August 9, 2019 \|archive-date=May 30, 2024 \|archive-url=https://web.archive.org/web/20240530045409/https://books.google.com/books?id=bJpNDwAAQBAJ \|url-status=live}}</ref><ref>{{cite book \|last1=Nelson \|first1=Brett \|title=Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch \|year=2018 \|publisher=[[Apress]] \|isbn=978-1-4842-3781-6 \|url=https://books.google.com/books?id=mTpsDwAAQBAJ \|language=en \|access-date=August 9, 2019 \|archive-date=May 30, 2024 \|archive-url=https://web.archive.org/web/20240530045418/https://books.google.com/books?id=mTpsDwAAQBAJ \|url-status=live}}</ref><ref>{{cite book \|last1=Yerburgh \|first1=Edd \|title=Testing Vue.js Applications \|date=2019 \|publisher=[[Manning Publications]] \|isbn=978-1-61729-524-9 \|url=https://books.google.com/books?id=7-FAtAEACAAJ \|language=en \|access-date=August 9, 2019 \|archive-date=May 30, 2024 \|archive-url=https://web.archive.org/web/20240530045404/https://books.google.com/books?id=7-FAtAEACAAJ \|url-status=live}}</ref><ref>{{cite book \|last1=Freeman \|first1=Adam \|title=Pro Vue.js 2 \|year=2018 \|publisher=[[Apress]] \|isbn=978-1-4842-3805-9 \|url=https://books.google.com/books?id=HQFuDwAAQBAJ \|language=en \|access-date=August 9, 2019 \|archive-date=May 30, 2024 \|archive-url=https://web.archive.org/web/20240530045404/https://books.google.com/books?id=HQFuDwAAQBAJ \|url-status=live}}</ref><ref>{{cite book \|last1=Franklin \|first1=Jack \|last2=Wanyoike \|first2=Michael \|last3=Bouchefra \|first3=Ahmed \|last4=Silas \|first4=Kingsley \|last5=Campbell \|first5=Chad A. \|last6=Jacques \|first6=Nilson \|last7=Omole \|first7=Olayinka \|last8=Mulders \|first8=Michiel \|title=Working with Vue.js \|year=2019 \|publisher=[[SitePoint]] \|isbn=978-1-4920-7144-0 \|url=https://books.google.com/books?id=OKScDwAAQBAJ \|language=en}}{{Dead link \|date=May 2024 \|bot=InternetArchiveBot \|fix-attempted=yes}}</ref><ref name="introduction" />}} It was created by Evan You and is maintained by him and the rest of the active core team members.<ref>{{cite web \|url=https://vuejs.org/about/team.html \|title=Meet the Team \|website=Vuejs.org \|access-date=September 23, 2019 \|language=en \|archive-date=February 7, 2022 \|archive-url=https://web.archive.org/web/20220207050948/https://vuejs.org/about/team.html \|url-status=live}}</ref> == Overview == '''Vue.js''' (commonly referred to as '''Vue'''; pronounced {{IPA\|{{IPAc-en\|v\|j\|uː}}}}, like '''view''') is an [[Open-source software\|open-source]] progressive [[JavaScript framework]] for building [[user interfaces]].<ref>{{Cite web\|url=https://vuejs.org/v2/guide/#What-is-Vue-js\|title=Introduction — Vue.js\|access-date=2017-03-11\|language=en}}</ref> Integration into projects that use other [[JavaScript library\|JavaScript libraries]] is made easy with Vue because it is designed to be incrementally adoptable. Also, Vue is a capable [[Web application frameworks\|web application framework]] that is able to power advanced [[single-page application]]s. Vue.js features an incrementally adaptable architecture that focuses on declarative rendering and component composition. The core library is focused on the view layer only.<ref name="introduction" /> Advanced features required for complex applications such as [[routing]], [[state management]] and [[Build automation\|build tooling]] are offered via officially maintained supporting libraries and packages.<ref>{{cite web \|url=https://www.patreon.com/evanyou \|title=Evan is creating Vue.js \|work=Patreon \|access-date=March 11, 2017 \|language=en \|archive-date=March 3, 2019 \|archive-url=https://web.archive.org/web/20190303114124/https://www.patreon.com/evanyou \|url-status=live }}</ref> Vue.js allows for extending [[HTML]] with HTML attributes called directives.<ref>{{cite web \|url=https://www.w3schools.com/whatis/whatis_vue.asp \|title=What is Vue.js \|website=W3Schools \|access-date=January 21, 2020 \|language=en \|archive-date=January 22, 2020 \|archive-url=https://web.archive.org/web/20200122074512/https://www.w3schools.com/whatis/whatis_vue.asp \|url-status=live }}</ref> The directives offer functionality to HTML [[Application software\|applications]], and come as either [[Builtin function\|built-in]] or user defined directives. According to a 2016 JavaScript survey, Vue has an 89% developer satisfaction rating. Vue accumulates around 80 [[GitHub]] stars per day,<ref>{{Cite web\|url=http://stateofjs.com/2016/frontend/\|title=State Of JavaScript Survey Results: Front-end Frameworks\|access-date=2017-03-11\|language=en}}</ref><ref>{{Cite web\|url=http://bestof.js.org/tags/framework/trending/last-12-months\|title=Trending JavaScript Frameworks\|last=\|first=\|date=\|website=\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> and is the 14th most starred project on GitHub of all time.<ref>{{Cite web\|url=https://github.com/search?p=2&q=stars%3A%3E1&s=stars&type=Repositories\|title=Most Starred Repositories\|last=\|first=\|date=\|website=GitHub\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> == ~~Overview~~History == Vue was created by Evan You after working for [[Google]] using [[AngularJS]] in several projects. He later summed up his thought process: "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight."<ref>{{cite news \|url=https://betweenthewires.org/2016/11/03/evan-you/ \|archive-url=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/ \|url-status=dead \|archive-date=June 3, 2017 \|title=Evan You \|date=November 3, 2016 \|work=Between the Wires \|access-date=August 26, 2017 \|language=en}}</ref> The first source code commit to the project was dated July 2013, at which time it was originally named "Seed".<ref name=":2">{{Cite book \|last1=贾 \|first1=志杰 \|title=剑指大前端全栈工程师 \|last2=史 \|first2=广 \|last3=赵 \|first3=东 \|year=2023 \|isbn=9787302617594 \|language=zh-CN \|trans-title=Aspiring Frontend: Full-Stack Engineer}}</ref> Vue was first publicly announced the following February, in 2014.<ref name=":0">{{Cite web \|date=2014-02-03 \|title=Vue.js: JavaScript MVVM made simple \|url=https://news.ycombinator.com/item?id=7169288 \|access-date=2023-01-29 \|website=Hacker News \|archive-date=January 29, 2023 \|archive-url=https://web.archive.org/web/20230129215705/https://news.ycombinator.com/item?id=7169288 \|url-status=live }}</ref><ref name=":1">{{Cite web \|date=2014-02-11 \|title=First Week of Launching Vue.js \|url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html \|access-date=2023-01-29 \|website=Evan You \|archive-date=April 12, 2017 \|archive-url=https://web.archive.org/web/20170412110312/http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html \|url-status=live }}</ref> ~~Vue.js is a front-end framework that is simple to use yet powerful in nature.~~ Version names are often derived from [[manga]] and [[anime]] series, with the first letters arranged in alphabetical order. The project focuses on making some of the best ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable, so that any developer can quickly pick it up and enjoy the productivity boost when working with modern, interactive web interfaces. === Versions === It is also designed to be progressively adoptable: Vue.js core is a drop-in library that can be used in existing pages, you can use it to add simple interactivity, or to replace [[jQuery]] entirely. On the other hand, the project also includes libraries and tools that supports building large and ambitious single page applications.<ref>{{Cite web\|url=https://www.patreon.com/evanyou\|title=Evan is creating Vue.js {{!}} Patreon\|work=Patreon\|access-date=2017-03-11\|language=en}}</ref> {\| class="wikitable" \|- ! Version !! Release date !! Title !! End of LTS !! End of Life \|- \|3.5 \|{{dts\|2024-09-01}} \|[[Tengen Toppa Gurren Lagann]]<ref>{{cite web \|date=September 1, 2024 \|title=Announcing Vue 3.5 \|url=https://blog.vuejs.org/posts/vue-3-5 \|url-status=live \|archive-url=https://web.archive.org/web/20240903133340/https://blog.vuejs.org/posts/vue-3-5 \|archive-date=September 3, 2024 \|access-date=October 25, 2024 \|work=Vue.js}}</ref> \| \| \|- \|3.4 \|{{dts\|2023-12-28}} \|[[Slam Dunk (manga)\|Slam Dunk]]<ref>{{cite web \|title=Announcing Vue 3.4 \|url=https://blog.vuejs.org/posts/vue-3-4 \|work=Vue.js \|access-date=29 March 2024 \|date=December 28, 2023 \|archive-date=March 24, 2024 \|archive-url=https://web.archive.org/web/20240324024208/https://blog.vuejs.org/posts/vue-3-4 \|url-status=live }}</ref> \| \| \|- \| 3.3 \|\| {{dts\|2023-05-11}} \|\| [[Rurouni Kenshin]]<ref>{{cite web \|url=https://github.com/vuejs/vue-next/releases/tag/v3.3.0 \|title=v3.3.0 Rurouni Kenshin \|date=May 11, 2023 \|via=GitHub \|work=Vue.js \|access-date=2023-05-12 \|language=en \|archive-date=December 13, 2023 \|archive-url=https://web.archive.org/web/20231213191126/https://github.com/vuejs/core/releases/tag/v3.3.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 3.2 \|\| {{dts\|2021-08-05}} \|\| [[The Quintessential Quintuplets\|Quintessential Quintuplets]]<ref>{{cite web \|url=https://github.com/vuejs/vue-next/releases/tag/v3.2.0 \|title=v3.2.0 Quintessential Quintuplets \|date=August 5, 2021 \|via=GitHub \|work=Vue.js \|access-date=August 10, 2021 \|language=en \|archive-date=August 10, 2021 \|archive-url=https://web.archive.org/web/20210810001705/https://github.com/vuejs/vue-next/releases/tag/v3.2.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 3.1 \|\| {{dts\|2021-06-07}} \|\| [[Pluto (manga)\|Pluto]]<ref>{{cite web \|url=https://github.com/vuejs/vue-next/releases/tag/v3.1.0 \|title=v3.1.0 Pluto \|date=June 7, 2021 \|via=GitHub \|work=Vue.js \|access-date=July 18, 2021 \|language=en \|archive-date=July 18, 2021 \|archive-url=https://web.archive.org/web/20210718094551/https://github.com/vuejs/vue-next/releases/tag/v3.1.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 3.0 \|\| {{dts\|2020-09-18}} \|\| [[One Piece]]<ref>{{cite web \|url=https://github.com/vuejs/vue-next/releases/tag/v3.0.0 \|title=v3.0.0 One Piece \|date=September 18, 2020 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=September 19, 2020 \|archive-url=https://web.archive.org/web/20200919013105/https://github.com/vuejs/vue-next/releases/tag/v3.0.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 2.7 \|\| {{dts\|2022-07-01}} \|\| [[Naruto]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.7.0 \|title=v2.7.0 Naruto \|date=July 1, 2022 \|via=GitHub \|work=Vue.js \|access-date=July 1, 2022 \|language=en \|archive-date=July 1, 2022 \|archive-url=https://web.archive.org/web/20220701141335/https://github.com/vuejs/vue/releases/tag/v2.7.0 \|url-status=live }}</ref> \|\| {{dts\|2023-12-31}} \|\| {{dts\|2023-12-31}} \|- \| 2.6 \|\| {{dts\|2019-02-04}} \|\| [[Macross]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.6.0 \|title=v2.6.0 Macross \|date=February 4, 2019 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=November 11, 2020 \|archive-url=https://web.archive.org/web/20201111182125/https://github.com/vuejs/vue/releases/tag/v2.6.0 \|url-status=live }}</ref> \|\| {{dts\|2022-03-18}} \|\| {{dts\|2023-09-18}} \|- \| 2.5 \|\| {{dts\|2017-10-13}} \|\| [[Level E]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.5.0 \|title=v2.5.0 Level E \|date=October 13, 2017 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=September 18, 2020 \|archive-url=https://web.archive.org/web/20200918170329/https://github.com/vuejs/vue/releases/tag/v2.5.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 2.4 \|\| {{dts\|2017-07-13}} \|\| [[Kill la Kill]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.4.0 \|title=v2.4.0 Kill la Kill \|date=July 13, 2017 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=November 9, 2020 \|archive-url=https://web.archive.org/web/20201109042137/https://github.com/vuejs/vue/releases/tag/v2.4.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 2.3 \|\| {{dts\|2017-04-27}} \|\| [[JoJo's Bizarre Adventure]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.3.0 \|title=v2.3.0 JoJo's Bizarre Adventure \|date=April 27, 2017 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=November 11, 2020 \|archive-url=https://web.archive.org/web/20201111192047/https://github.com/vuejs/vue/releases/tag/v2.3.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 2.2 \|\| {{dts\|2017-02-26}} \|\| [[Initial D]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.2.0 \|title=v2.2.0 Initial D \|date=February 26, 2017 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413135052/https://github.com/vuejs/vue/releases/tag/v2.2.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 2.1 \|\| {{dts\|2016-11-22}} \|\| [[Hunter × Hunter]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.1.0 \|title=v2.1.0 Hunter X Hunter \|date=November 22, 2016 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=November 8, 2020 \|archive-url=https://web.archive.org/web/20201108094602/https://github.com/vuejs/vue/releases/tag/v2.1.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 2.0 \|\| {{dts\|2016-09-30}} \|\| [[Ghost in the Shell]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v2.0.0 \|title=v2.0.0 Ghost in the Shell \|date=September 30, 2016 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=October 27, 2020 \|archive-url=https://web.archive.org/web/20201027193218/https://github.com/vuejs/vue/releases/tag/v2.0.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 1.0 \|\| {{dts\|2015-10-27}} \|\| [[Neon Genesis Evangelion\|Evangelion]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/1.0.0 \|title=1.0.0 Evangelion \|date=October 27, 2015 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413114912/https://github.com/vuejs/vue/releases/tag/1.0.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 0.12 \|\| {{dts\|2015-06-12}} \|\| [[Dragon Ball]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/0.12.0 \|title=0.12.0: Dragon Ball \|date=June 12, 2015 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413135200/https://github.com/vuejs/vue/releases/tag/0.12.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 0.11 \|\| {{dts\|2014-11-07}} \|\| [[Cowboy Bebop]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/0.11.0 \|title=v0.11.0: Cowboy Bebop \|date=November 7, 2014 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413135213/https://github.com/vuejs/vue/releases/tag/0.11.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 0.10 \|\| {{dts\|2014-03-23}} \|\| [[Blade Runner]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v0.10.0 \|title=v0.10.0: Blade Runner \|date=March 23, 2014 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413135244/https://github.com/vuejs/vue/releases/tag/v0.10.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 0.9 \|\| {{dts\|2014-02-25}} \|\| [[Animatrix]]<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v0.9.0 \|title=v0.9.0: Animatrix \|date=February 25, 2014 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413115026/https://github.com/vuejs/vue/releases/tag/v0.9.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 0.8 \|\| {{dts\|2014-01-27}} \|\| {{n/a}}<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v0.8.0 \|title=v0.8.0 \|date=January 27, 2014 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413114929/https://github.com/vuejs/vue/releases/tag/v0.8.0 \|url-status=live }}</ref> \|\| colspan="2" \| first version publicly announced<ref name=":0" /><ref name=":1" /> \|- \| 0.7 \|\| {{dts\|2013-12-24}} \|\| {{n/a}}<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/v0.7.0 \|title=v0.7.0 \|date=December 24, 2013 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413114747/https://github.com/vuejs/vue/releases/tag/v0.7.0 \|url-status=live }}</ref> \|\| \|\| \|- \| 0.6 \|\| {{dts\|2013-12-08}} \|\| VueJS<ref>{{cite web \|url=https://github.com/vuejs/vue/releases/tag/0.6.0 \|title=0.6.0: VueJS \|date=December 8, 2013 \|via=GitHub \|work=Vue.js \|access-date=September 23, 2020 \|language=en \|archive-date=April 13, 2021 \|archive-url=https://web.archive.org/web/20210413134939/https://github.com/vuejs/vue/releases/tag/0.6.0 \|url-status=live }}</ref> \|\| \|\| \|} When a new major is released i.e. v3.y.z, the last minor i.e. 2.x.y will become a LTS release for 18 months (bug fixes and security patches) and for the following 18 months will be in maintenance mode (security patches only).<ref>{{cite web \|url=https://github.com/vuejs/roadmap \|title=Vue Roadmap \|via=GitHub \|work=Vue.js \|date=November 6, 2022 \|language=en \|access-date=December 10, 2021 \|archive-date=December 10, 2021 \|archive-url=https://web.archive.org/web/20211210095019/https://github.com/vuejs/roadmap \|url-status=live }}</ref> ~~== History ==~~ Vue was created by Evan You after working for [[Google]] on [[AngularJS]]. You later summed up his thought process, "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?"<ref>{{Cite news\|url=https://betweenthewires.org/between-the-wires-evan-you-cb56660bc8a4#.yeez3vpy1\|title=Between the Wires {{!}} Evan You\|date=2016-11-03\|work=Between the Wires\|access-date=2017-03-11}}</ref> === State management evolution === Vue was originally released in February 2014 by Evan You. The project was posted on [[Hacker News]], Echo JS, and the ''/r/javascript'' [[Reddit\|subreddit]] the day of its initial release. Within one day the project reached the frontpage of all three sites.<ref>{{Cite web\|url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html\|title=First Week of Launching Vue.js\|website=Evan You\|access-date=2017-03-11}}</ref> * '''2015''' - Vuex introduced as official state management solution * '''2021''' - Pinia development begins as Vuex 5 experiment * '''2022''' - Pinia becomes officially recommended for new projects * '''2023''' - Vue team announces Vuex maintenance mode transition == Features == === ~~Templates~~Components === Vue components extend basic [[HTML element]]s to encapsulate reusable code. At a high level, components are custom elements to which the Vue's compiler attaches behavior. In Vue, a component is essentially a Vue instance with pre-defined options.<ref>{{cite web \|url=https://vuejs.org/guide/essentials/component-basics.html \|title=Components \|website=Vuejs.org \|access-date=March 11, 2017 \|language=en \|archive-date=February 10, 2022 \|archive-url=https://web.archive.org/web/20220210121233/https://vuejs.org/guide/essentials/component-basics.html \|url-status=live }}</ref> Vue uses an [[HTML]]-based template syntax that allows you to declaratively bind the rendered [[Document Object Model\|DOM]] to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and [[HTML parser]]s. Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes. The code snippet below contains an example of a Vue component. The component presents a button and prints the number of times the button is clicked: <syntaxhighlight lang="vue"> <!doctype html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> In Vue, you can use the template syntax or choose to directly write render functions using [[JSX (JavaScript)\|JSX]]. In order to do so just replace the template option with a render function.<ref>{{Cite web\|url=https://vuejs.org/v2/guide/syntax.html\|title=Template Syntax — Vue.js\|access-date=2017-03-11\|language=en}}</ref> Render functions open up possibilities for powerful component-based patterns — for example, the new transition system is now completely component-based, using render functions internally.<ref>{{Cite web\|url=https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9\|title=Vue 2.0 is Here!\|last=\|first=\|date=2016-09-30\|website=The Vue Point\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> <div id="app"> <button-clicked :initial-count="0" /> </div> <script> ~~=== Reactivity ===~~ const { One of Vue’s most distinct features is the unobtrusive reactivity system. Models are just plain [[JavaScript]] objects. When you modify them, the view updates. It makes state management very simple and intuitive. Vue provides optimized re-rendering out of the box without you having to do anything. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render.<ref>{{Cite web\|url=https://vuejs.org/v2/guide/reactivity.html\|title=Reactivity in Depth — Vue.js\|access-date=2017-03-11\|language=en}}</ref> defineComponent, ref, computed, watch, watchEffect, onMounted, createApp } = Vue const ButtonClicked = defineComponent({ ~~=== Components ===~~ name: 'ButtonClicked', Components are one of the most powerful features of Vue. In a large application, it is necessary to divide the whole app into small, self-contained, and often reusable components to make development manageable. Components extend basic [[HTML element]]s to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In Vue, a component is essentially a Vue instance with pre-defined options.<ref>{{Cite web\|url=https://vuejs.org/v2/guide/components.html\|title=Components — Vue.js\|access-date=2017-03-11\|language=en}}</ref> props: { ~~The code snippet below contains an example of a Vue component. The component presents a button and prints of the number of times the button is clicked :~~ initialCount: { ~~<pre>~~ type: Number, ~~Vue.component('buttonclicked', {~~ required: true ~~props: ["initial_count"],~~ ~~data:~~ ~~function()~~ ~~{var~~ q = ~~{"count":~~ ~~0};~~ ~~return~~ q;} , }, ~~template: '<button v-on:click="onclick">Clicked {{count}} times</button>'~~ setup(props) { , const count = ref(0) ~~methods: {~~ ~~"onclick": function() {~~ ~~this.count = this.count + 1;~~ } }, ~~mounted: function() {~~ ~~this.count = this.initial_count;~~ } }; ~~</pre>~~ const doubleCount = computed(() => count.value * 2) ~~=== Transitions ===~~ ~~Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the [[Document Object Model\|DOM]]. This includes tools to:~~ * automatically apply classes for [[Cascading Style Sheets\|CSS]] transitions and animations * integrate 3rd-party CSS animation libraries, such as Animate.css * use JavaScript to directly manipulate the DOM during transition hooks * integrate 3rd-party JavaScript animation libraries, such as [[Velocity (JavaScript library)\|Velocity.js]] const handleClick = () => { ~~When an element wrapped in a transition component is inserted or removed, this is what happens:~~ count.value += 1 ~~# Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.~~ } ~~# If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.~~ # If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame.<ref>{{Cite web\|url=https://vuejs.org/v2/guide/transitions.html\|title=Transition Effects — Vue.js\|access-date=2017-03-11\|language=en}}</ref><ref>{{Cite web\|url=https://vuejs.org/v2/guide/transitioning-state.html\|title=Transitioning State — Vue.js\|access-date=2017-03-11\|language=en}}</ref> watch(count, (newValue, oldValue) => { ~~=== Routing ===~~ console.log(`The value of count is changed from ${oldValue} to ${newValue}.`) Vue itself doesn’t come with [[routing]]. But there’s the vue-router package to help you out. It supports mapping nested routes to nested components and offers fine-grained transition control. Creating a Single-page Application with Vue + vue-router is dead simple. With Vue, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.<ref>{{Cite web\|url=https://vuejs.org/v2/guide/routing.html\|title=Routing — Vue.js\|access-date=2017-03-11\|language=en}}</ref> }) watchEffect(() => console.log(`Double the value of count is ${doubleCount.value}`)) ~~== Comparison with Other Frameworks ==~~ onMounted(() => { ~~=== React ===~~ count.value = props.initialCount ~~React and Vue share many similarities. They both:~~ * ~~Use~~ a ~~virtual~~ ~~DOM~~ ~~(since~~ ~~Vue~~ ~~2.0~~ }) * Provide reactive and composable view components * Maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries return { ~~When compared to React development, Vue can be integrated to an existing web application much more easily. Normally, a web application can~~ count, ~~start using Vue immediately by simply including the Vue.js JavaScript library. Usage with [[Webpack]] or Browserify,~~ doubleCount, ~~are not strictly necessarily. This is in stark contrast to React development where Usage with [[Webpack]] and Babel is~~ handleClick ~~unavoidable, therefore making converting existing web application much more difficult.~~ } }, template: ` <button @click="handleClick">Clicked <nowiki>{{ count }}</nowiki> times</button> ` }) const app = createApp({}) ~~=== AngularJS ===~~ Some of Vue’s syntax will look very similar to AngularJS (e.g. <code>v-if</code> vs <code>ng-if</code>). This is because there were a lot of things that AngularJS got right and these were an inspiration for Vue very early in its development. There are also many pains that come with AngularJS however, where Vue has attempted to offer a significant improvement. app.component('ButtonClicked', ButtonClicked) ~~=== Ember ===~~ Ember is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and flexibility suffers. It’s a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions. app.mount('#app') ~~That said, it would probably make a better comparison between Vue core and Ember’s templating and object model layers:~~ </script> * Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties. In Ember, you need to wrap everything in Ember Objects and manually declare dependencies for computed properties. </body> * Vue’s template syntax harnesses the full power of JavaScript expressions, while Handlebars’ expression and helper syntax is intentionally quite limited in comparison. </html> * Performance-wise, Vue outperforms Ember by a fair margin, even after the latest Glimmer engine update in Ember 2.0. Vue automatically batches updates, while in Ember you need to manually manage run loops in performance-critical situations. </syntaxhighlight> === ~~Knockout~~Templates === Vue uses an [[HTML]]-based template syntax that allows binding the rendered [[Document Object Model\|DOM]] to the underlying Vue instance's data. All Vue templates are valid HTML that can be parsed by specification-compliant browsers and HTML [[Parsing\|parsers]]. Vue compiles the templates into [[virtual DOM]] render functions. A virtual Document Object Model (or "DOM") allows Vue to render components in its memory before updating the browser. Combined with the reactivity system, Vue can calculate the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes. Knockout was a pioneer in the MVVM and dependency tracking spaces and its reactivity system is very similar to Vue’s. Its browser support is also very impressive considering everything it does, with support back to IE6! Vue on the other hand only supports IE9+. <ref>{{cite news \|last1=Jordan \|first1=John \|title=Vue Admin Template \|url=https://themeselection.com/item/category/vuejs-admin-templates/ \|access-date=16 July 2022}}</ref> Vue users can use template syntax or choose to directly write render functions using hyperscript either through function calls or [[JSX (JavaScript)\|JSX]].<ref>{{cite web \|url=https://vuejs.org/guide/essentials/template-syntax.html \|title=Template Syntax \|website=Vuejs.org \|access-date=March 11, 2017 \|language=en \|archive-date=February 10, 2022 \|archive-url=https://web.archive.org/web/20220210105315/https://vuejs.org/guide/essentials/template-syntax.html \|url-status=live }}</ref> Render functions allow applications to be built from [[software components]].<ref>{{cite web \|url=https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9 \|title=Vue 2.0 is Here! \|date=September 30, 2016 \|website=The Vue Point \|access-date=March 11, 2017 \|archive-date=March 12, 2017 \|archive-url=https://web.archive.org/web/20170312072632/https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9 \|url-status=live }}</ref> === Reactivity === Over time though, Knockout development has slowed and it’s begun to show its age a little. For example, its component system lacks a full set of lifecycle hooks and although it’s a very common use case, the interface for passing children to a component feels a little clunky compared to Vue’s. Vue features a reactivity system that uses plain [[JavaScript]] objects and optimized re-rendering. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render.<ref>{{cite web \|url=https://vuejs.org/guide/extras/reactivity-in-depth.html \|title=Reactivity in Depth \|website=Vuejs.org \|access-date=March 11, 2017 \|language=en \|archive-date=February 10, 2022 \|archive-url=https://web.archive.org/web/20220210105118/https://vuejs.org/guide/extras/reactivity-in-depth.html \|url-status=live }}</ref> === Transitions === There also seem to be philosophical differences in the API design which if you’re curious, can be demonstrated by how each handles the creation of a simple todo list. It’s definitely somewhat subjective, but many consider Vue’s API to be less complex and better structured. Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the [[Document Object Model\|DOM]]. This includes tools to: * Automatically apply classes for [[Cascading Style Sheets\|CSS]] transitions and animations * Integrate third-party CSS animation libraries, such as Animate.css * Use JavaScript to directly manipulate the DOM during transition hooks * Integrate third-party JavaScript animation libraries, such as [[Velocity (JavaScript library)\|Velocity.js]] When an element wrapped in a transition component is inserted or removed, this is what happens: ~~=== Polymer ===~~ # Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings. Polymer is yet another Google-sponsored project and in fact was a source of inspiration for Vue as well. Vue’s components can be loosely compared to Polymer’s custom elements and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features and requires non-trivial polyfills to work (with degraded performance) in browsers that don’t support those features natively. In contrast, Vue works without any dependencies or polyfills down to IE9. # If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings. # If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame.<ref>{{cite web \|url=https://vuejs.org/guide/built-ins/transition.html \|title=Transition Effects \|website=Vuejs.org \|access-date=March 11, 2017 \|language=en \|archive-date=December 13, 2023 \|archive-url=https://web.archive.org/web/20231213191121/https://vuejs.org/guide/built-ins/transition.html \|url-status=live }}</ref><ref>{{cite web \|url=https://vuejs.org/guide/extras/animation.html \|title=Transitioning State \|website=Vuejs.org \|access-date=March 11, 2017 \|language=en \|archive-date=February 10, 2022 \|archive-url=https://web.archive.org/web/20220210105126/https://vuejs.org/guide/extras/animation.html \|url-status=live }}</ref> === Routing === In Polymer 1.0, the team has also made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are boolean negation and single method calls. Its computed property implementation is also not very flexible. A traditional disadvantage of [[single-page application]]s (SPAs) is the inability to share links to the exact "sub" page within a specific web page. Because SPAs serve their users only one URL-based response from the server (it typically serves index.html or index.vue), bookmarking certain screens or sharing links to specific sections is normally difficult if not impossible. To solve this problem, many client-side routers delimit their dynamic URLs with a "[[Shebang (Unix)\|hashbang]]" (#!), e.g. ''page.com/#!/''. However, with HTML5 most modern browsers support routing without hashbangs. Vue provides an interface to change what is displayed on the page based on the current URL path – regardless of how it was changed (whether by emailed link, refresh, or in-page links). Additionally, using a front-end router allows for the intentional transition of the browser path when certain browser events (i.e. clicks) occur on buttons or links. Vue itself doesn't come with front-end hashed routing. But the open-source "vue-router" package provides an API to update the application's URL, supports the back button (navigating history), and email password resets or email verification links with authentication URL parameters. It supports mapping nested routes to nested components and offers fine-grained transition control. With Vue, developers are already composing applications with small building blocks building larger components. With vue-router added to the mix, components must merely be mapped to the routes they belong to, and parent/root routes must indicate where children should render.<ref>{{cite web \|url=https://vuejs.org/guide/scaling-up/routing.html \|title=Routing \|website=Vuejs.org \|access-date=March 11, 2017 \|language=en \|archive-date=February 10, 2022 \|archive-url=https://web.archive.org/web/20220210105119/https://vuejs.org/guide/scaling-up/routing.html \|url-status=live }}</ref> Polymer custom elements are authored in HTML files, which limits you to plain JavaScript/CSS (and language features supported by today’s browsers). In comparison, Vue’s single file components allows you to easily use ES2015+ and any CSS preprocessors you want. {{syntaxhighlight\|lang=vue\|code= When deploying to production, Polymer recommends loading everything on-the-fly with HTML Imports, which assumes browsers implementing the spec, and HTTP/2 support on both server and client. This may or may not be feasible depending on your target audience and deployment environment. In cases where this is not desirable, you will have to use a special tool called Vulcanizer to bundle your Polymer elements. On this front, Vue can combine its async component feature with Webpack’s code-splitting feature to easily split out parts of the application bundle to be lazy-loaded. This ensures compatibility with older browsers while retaining great app loading performance. <div id="app"> <router-view></router-view> </div> ... <script> It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation - however at this moment we are still waiting for the specs to mature and be widely implemented in all mainstream browsers before making any serious commitments. ... const User = { template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>' }; const router = new VueRouter({ ~~=== Riot ===~~ routes: [ Riot 2.0 provides a similar component-based development model (which is called a “tag” in Riot), with a minimal and beautifully designed API. Riot and Vue probably share a lot in design philosophies. However, despite being a bit heavier than Riot, Vue does offer some significant advantages: { path: '/user/:id', component: User } ] }); ... </script> }} The code above: # Sets a front-end route at <code>websitename.com/user/<id></code>. # Which will render in the User component defined in (const User...) # Allows the User component to pass in the particular id of the user which was typed into the URL using the $route object's params key: <code>$route.params.id</code>. # This template (varying by the params passed into the router) will be rendered into <code><router-view></router-view></code> inside the DOM's div#app. # The finally generated HTML for someone typing in: <code>websitename.com/user/1</code> will be: {{syntaxhighlight\|lang=html\|code= <div id="app"> <div> <div>User 1</div> </div> </div> }} <ref>{{cite web \|last1=You \|first1=Evan \|title=Vue Nested Routing (2) \|url=https://router.vuejs.org/en/essentials/nested-routes.html \|website=Vue Home Page (subpage) \|access-date=May 10, 2017 \|archive-date=May 8, 2017 \|archive-url=https://web.archive.org/web/20170508221910/http://router.vuejs.org/en/essentials/nested-routes.html \|url-status=dead }}</ref> == Ecosystem == ~~Transition effect system. Riot has none.~~ The core library comes with tools and libraries both developed by the core team and contributors. === Official tooling === ~~A far more powerful router. Riot’s routing API is extremely minimal.~~ * '''Devtools''' – Browser devtools extension for debugging Vue.js applications * '''Vite''' – Standard Tooling for rapid Vue.js development * '''Vue Loader''' – a webpack loader that allows the writing of Vue components in a format called Single-File Components (SFCs) === Official libraries === ~~Better performance. Riot traverses a DOM tree rather than using a virtual DOM, so suffers from the same performance issues as AngularJS 1.~~ * '''Vue Router''' – The official router, suitable for building [[Single-page application\|SPAs]]<ref name=":2" /> * '''Pinia''' – The official state management solution === Video courses === More mature tooling support. Vue provides official support for Webpack and Browserify, while Riot relies on community support for build system integration.<ref>{{Cite web\|url=https://vuejs.org/v2/guide/comparison.html\|title=Comparison with Other Frameworks\|last=\|first=\|date=\|website=\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> * '''Vue School''' – Expert-led courses on Vue.js and its ecosystem.<ref>{{Cite web \|title=Vue School {{!}} The #1 source for learning Vue.js from experts \|url=https://vueschool.io/ \|access-date=2024-12-24 \|website=Vue School \|language=en}}</ref> ~~== Supporting Libraries ==~~ * vue-router<ref>{{Cite web\|url=http://router.vuejs.org/en\|title=vue-router\|last=\|first=\|date=\|website=router.vuejs.org\|language=en\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> === State management libraries === * vuex<ref>{{Cite web\|url=https://vuex.vuejs.org/en/\|title=vuex\|last=\|first=\|date=\|website=vuex.vuejs.org\|language=en\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> '''Pinia''' – Official state management solution with modular architecture vue-loader<ref>{{Cite web\|url=https://vue-loader.vuejs.org/en/\|title=vue-loader\|last=\|first=\|date=\|website=vue-loader.vuejs.org\|language=en\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> '''Vuex''' – Legacy state management library, now in maintenance mode vueify <ref>{{Cite web\|url=https://github.com/vuejs/vueify\|title=vueify\|last=\|first=\|date=\|website=GitHub\|language=en\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> '''VueUse''' – Collection of 200+ composition utilities including state management helpers vue-cli<ref>{{Cite web\|url=https://github.com/vuejs/vue-cli\|title=vue-cli\|last=\|first=\|date=\|website=GitHub\|language=en\|archive-url=\|archive-date=\|dead-url=\|access-date=2017-03-11}}</ref> == Comparison with other frameworks == JavaScript-based web application frameworks, such as Vue, provide extensive capabilities but come with associated trade-offs. These frameworks often extend or enhance features available through native web technologies, such as routing, component-based development, and state management. While native web standards, including Web Components, modern JavaScript APIs like Fetch and ES Modules, and browser capabilities like Shadow DOM, have advanced significantly, frameworks remain widely used for their ability to enhance developer productivity, offer structured patterns for large-scale applications, simplify handling edge cases, and provide tools for performance optimization.<ref name=":02">{{Cite book \|title=JavaScript Frameworks for Modern Web Development: The Essential Frameworks, Libraries, and Tools to Learn Right Now \|isbn=978-1484249949}}</ref><ref name=":12">{{Cite book \|title=Building Native Web Components: Front-End Development with Polymer and Vue.js \|isbn=978-1484259047}}</ref><ref name=":22">{{Cite book \|title=Hands-On JavaScript High Performance: Build faster web apps using Node.js, Svelte.js, and WebAssembly \|isbn=978-1838821098}}</ref> Frameworks can introduce abstraction layers that may contribute to performance overhead, larger bundle sizes, and increased complexity. Modern frameworks, such as Vue 3, address these challenges with features like concurrent rendering, tree-shaking, and selective hydration. While these advancements improve rendering efficiency and resource management, their benefits depend on the specific application and implementation context. Lightweight frameworks, such as Svelte and Preact, take different architectural approaches, with Svelte eliminating the virtual DOM entirely in favor of compiling components to efficient JavaScript code, and Preact offering a minimal, compatible alternative to React. Framework choice depends on an application’s requirements, including the team’s expertise, performance goals, and development priorities.<ref name=":02" /><ref name=":12" /><ref name=":22" /> A newer category of web frameworks, including enhance.dev, Astro, and Fresh, leverages native web standards while minimizing abstractions and development tooling.<ref>{{Cite web \|title=Enhance \|website=[[GitHub]] \|url=https://github.com/enhance-dev }}</ref><ref>{{Cite web \|title=Astro framework \|website=[[GitHub]] \|url=https://github.com/withastro/astro }}</ref><ref>{{Cite web \|title=Fresh \|website=[[GitHub]] \|url=https://github.com/denoland/fresh }}</ref> These solutions emphasize [[progressive enhancement]], [[server-side rendering]], and optimizing performance. Astro renders static HTML by default while hydrating only interactive parts. Fresh focuses on server-side rendering with zero runtime overhead. Enhance.dev prioritizes progressive enhancement patterns using Web Components. While these tools reduce reliance on client-side JavaScript by shifting logic to build-time or server-side execution, they still use JavaScript where necessary for interactivity. This approach makes them particularly suitable for performance-critical and content-focused applications.<ref name=":02" /><ref name=":12" /><ref name=":22" /> == See also == {{Portal\|Free and open-source software}} * [[Comparison of JavaScript frameworks]] * [[~~React~~Comparison of (JavaScript-based web ~~library)~~frameworks]] * [[Svelte]] * [[React (software)\|React]] * [[AngularJS]] * [[~~JavaScript~~Angular (web framework)\|~~JavaScript Framework~~Angular]] * [[Quasar Framework]] * [[JavaScript library\|JavaScript Library]] * [[Web framework]] * [[JavaScript library]] * [[Model–view–viewmodel]] * [[Nuxt]] == Sources == {{Free-content attribution \|title= Vue.js Guide \|author = Vue.js \|documentURL= https://vuejs.org/guide/introduction.html \|license statement URL= https://github.com/vuejs/vuejs.org/blob/fdc66945e18020cdbdc729fd7ab8005d123216a7/LICENSE \|license= [[MIT License]] }} == References == {{~~Reflist~~reflist}} == External links == * {{Official website}} {{JS templating \|state=autocollapse}} {{Web frameworks}} {{NodeJs}} __FORCETOC__ [[Category:2014 software]] [[Category:JavaScript web frameworks]] [[Category:Software using the MIT license]] [[Category:Web development]] [[Category:Web frameworks]] [[Category:JavaScript libraries]]