Vue.js

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. Advanced features required for complex applications such as routing, state management and build tooling are offered via officially maintained supporting libraries and packages.{{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 }}

Vue.js allows for extending HTML with HTML attributes called directives.{{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 }} The directives offer functionality to HTML applications, and come as either built-in or user defined directives.

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."{{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}} The first source code commit to the project was dated July 2013, at which time it was originally named "Seed".{{Cite book |last1=贾 |first1=志杰 |title=剑指大前端全栈工程师 |last2=史 |first2=广 |last3=赵 |first3=东 |year=2023 |isbn=9787302617594 |language=zh-CN |trans-title=Aspiring Frontend: Full-Stack Engineer}} Vue was first publicly announced the following February, in 2014.{{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 }}{{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 }}

Version names are often derived from manga and anime series, with the first letters arranged in alphabetical order.

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).{{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 }}

Vue components extend basic HTML elements 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.{{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 }}

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:

Vue uses an HTML-based template syntax that allows binding the rendered DOM to the underlying Vue instance's data. All Vue templates are valid HTML that can be parsed by specification-compliant browsers and HTML 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.

{{cite news |last1=Jordan |first1=John |title=Vue Admin Template |url=https://themeselection.com/item/category/vuejs-admin-templates/ |access-date=16 July 2022}}

Vue users can use template syntax or choose to directly write render functions using hyperscript either through function calls or JSX.{{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 }} Render functions allow applications to be built from software components.{{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 }}

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.{{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 }}

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:

• Automatically apply classes for 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.js

When an element wrapped in a transition component is inserted or removed, this is what happens:

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.
2. If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
3. 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.{{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 }}{{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 }}

A traditional disadvantage of single-page applications (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 "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.{{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 }}

{{syntaxhighlight|lang=vue|code=

...

}}

The code above:

1. Sets a front-end route at websitename.com/user/.
2. Which will render in the User component defined in (const User...)
3. 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: $route.params.id.
4. This template (varying by the params passed into the router) will be rendered into inside the DOM's div#app.
5. The finally generated HTML for someone typing in: websitename.com/user/1 will be:

{{syntaxhighlight|lang=html|code=

}}

{{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 }}

The core library comes with tools and libraries both developed by the core team and contributors.

• 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)

• Vue Router – The official router, suitable for building SPAs
• Pinia – The official state management solution

• Vue School – Expert-led courses on Vue.js and its ecosystem.{{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}}

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. {{Cite book |title=JavaScript Frameworks for Modern Web Development: The Essential Frameworks, Libraries, and Tools to Learn Right Now |isbn=978-1484249949}}{{Cite book |title=Building Native Web Components: Front-End Development with Polymer and Vue.js |isbn=978-1484259047}}{{Cite book |title=Hands-On JavaScript High Performance: Build faster web apps using Node.js, Svelte.js, and WebAssembly |isbn=978-1838821098}}

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. {{Cite web |title=Enhance |website=GitHub |url=https://github.com/enhance-dev }}{{Cite web |title=Astro framework |website=GitHub |url=https://github.com/withastro/astro }}{{Cite web |title=Fresh |website=GitHub |url=https://github.com/denoland/fresh }} 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.

{{portal|Free and open-source software}}

• Comparison of JavaScript-based web frameworks
• React
• AngularJS
• Angular
• Quasar Framework
• Web framework
• JavaScript library
• Model–view–viewmodel
• Nuxt

{{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

}}

{{reflist}}

• {{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