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.. Vue.js allows for extending HTML with HTML attributes called directives. 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."
 The first source code commit to the project was dated July 2013, and Vue was first released the following February, in 2014.
Getting to Know Vue
Version names are often derived from manga and anime, most of which are within the science fiction genre. When a new major is released ie v3.y.z, the last minor ie 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)..
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.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.
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.
.vue files (single file components)
To solve this problem, many client-side routers delimit their dynamic URLs with a "hashbang" (#!), e.g.
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..
The code above:. Sets a front-end route at websitename.com/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: $route.params.id.
This template (varying by the params passed into the router) will be rendered into
The finally generated HTML for someone typing in: websitename.com/user/1 will be:.
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. Vue CLI – 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. Vuex – Flux-inspired centralized state management. Vue Server Renderer – Server-Side Rendering.
Pinia – New simple state management. This article incorporates text from a free content work.
Licensed under MIT LicenseLicense statement/permission. Text taken from Vue.js Guide, Vue.js, . ^"First Week of Launching Vue.js". ^"vue/LICENSE". Retrieved April 17, 2017 – via GitHub.
^ abc"Introduction". Retrieved January 3, 2020. ^Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps.
O'Reilly Media. ^Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch. ^Yerburgh, Edd (2019). Testing Vue.js Applications. Manning Publications. ^Freeman, Adam (2018). ^Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019).
Working with Vue.js. ^"Meet the Team". Retrieved September 23, 2019. ^"Evan is creating Vue.js". Retrieved March 11, 2017. ^"What is Vue.js". Retrieved January 21, 2020. Between the Wires. November 3, 2016. Archived from the original on June 3, 2017.
In this module
Retrieved August 26, 2017. ^"v3.2.0 Quintessential Quintuplets". August 5, 2021. Retrieved August 10, 2021 – via GitHub. ^"v3.1.0 Pluto". Retrieved July 18, 2021 – via GitHub. ^"v3.0.0 One Piece". September 18, 2020. Retrieved September 23, 2020 – via GitHub. ^"v2.6.0 Macross".
February 4, 2019. Retrieved September 23, 2020 – via GitHub. ^"v2.5.0 Level E". October 13, 2017. Retrieved September 23, 2020 – via GitHub. ^"v2.4.0 Kill la Kill". Retrieved September 23, 2020 – via GitHub. ^"v2.3.0 JoJo's Bizarre Adventure". April 27, 2017. Retrieved September 23, 2020 – via GitHub.
^"v2.2.0 Initial D". February 26, 2017. Retrieved September 23, 2020 – via GitHub. ^"v2.1.0 Hunter X Hunter". November 22, 2016. Retrieved September 23, 2020 – via GitHub.
^"v2.0.0 Ghost in the Shell". September 30, 2016. Retrieved September 23, 2020 – via GitHub. ^"1.0.0 Evangelion". October 27, 2015. Retrieved September 23, 2020 – via GitHub. ^"0.12.0: Dragon Ball".
Retrieved September 23, 2020 – via GitHub. ^"v0.11.0: Cowboy Bebop". November 7, 2014. Retrieved September 23, 2020 – via GitHub. ^"v0.10.0: Blade Runner".
March 23, 2014. Retrieved September 23, 2020 – via GitHub.