Content deleted Content added
→top: change latest version to use Wikidata |
m Combined portal templates and other General fixes |
||
| (10 intermediate revisions by 8 users not shown) | |||
Line 1:
{{short description|Open-source JavaScript library for building user interfaces}}
{{Use mdy dates|date=August 2019}}▼
{{Primary sources|date=July 2019}}
▲{{Use mdy dates|date=August 2019}}
{{Infobox software
| name = Vue.js
| logo = Vue.js Logo 2.svg
| logo_size = 120px
| logo_upright = yes
| author = Evan You
Line 13 ⟶ 14:
| programming language = [[TypeScript]]
| platform = [[Web platform]]
| included with = [[Laravel]]
| 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>
}}
'''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>
Line 67 ⟶ 68:
| 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
|-
| 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> || ||
Line 89 ⟶ 90:
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>
=== State management evolution ===
* '''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 ==
Line 95 ⟶ 102:
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>
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="
<!doctype html>
<html>
Line 187 ⟶ 194:
=== Routing ===
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 "[[
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>
Line 238 ⟶ 245:
* '''Pinia''' – The official state management solution
=== Video
* '''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>
=== State management libraries ===
*'''Pinia''' – Official state management solution with modular architecture
*'''Vuex''' – Legacy state management library, now in maintenance mode
*'''VueUse''' – Collection of 200+ composition utilities including state management helpers
== 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.
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.
A newer category of web frameworks, including enhance.dev, Astro, and Fresh, leverages native web standards while minimizing abstractions and development tooling.
== See also ==
{{
* [[Comparison of JavaScript-based web frameworks]]
* [[Svelte]]
* [[React (software)|React]]
* [[AngularJS]]
| |||