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.
|Objective:||To setup a local Vue development environment, create a starter app, and understand the basics of how it works.|
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. 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.
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.
- 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. 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.. 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 derived from a free content work. Licensed under MIT LicenseLicense statement/permission. Licensed 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.
- November 3, 2016. Archived from the original on June 3, 2017. 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".
December 8, 2013. Retrieved September 23, 2020 – via GitHub. ^"Vue Roadmap". Vue.js – via GitHub. Retrieved March 11, 2017. ^"Template Syntax". Retrieved March 11, 2017.
Using Vue in MediaWiki
^"Vue 2.0 is Here!" September 30, 2016. Retrieved March 11, 2017. ^"Reactivity in Depth". Retrieved March 11, 2017. ^"Transition Effects". Retrieved March 11, 2017. ^"Transitioning State". Retrieved March 11, 2017. Retrieved March 11, 2017. "Vue Nested Routing (2)".
The NearbyPages extension, the first MediaWiki extension to use Vue.js, was released soon afterwards.
The RFC ended in March 2020, with the official decision to use Vue.js (though this decision was not clearly announced until August 2021). WVUI (Wikimedia Vue User Interface), the first attempt at a shared library for Vue.js-based components for use within Wikimedia projects, was created in May 2020.
The first MediaWiki version to include Vue.js, and the related Vuex library, was 1.35, released in September 2020. A replacement library for Vue.js within Wikimedia, Codex, was started in September 2021 following feedback from WMDE, and WVUI became deprecated.
Vue.js within MediaWiki was upgraded from version 2 to 3 in December 2021. Vue is bundled with MediaWiki as a ResourceLoader module. See below for details. MediaWiki currently includes the compatibility build of Vue.js v3.2, which provides compatibility for Vue 2 code.
We are still in the process of migrating pre-existing Vue 2 code to Vue 3, and have upgraded from to Vuex 4. New code should be written for Vue 3, and must set a compatConfig setting. See T289017 for more details on the migration plan. Single-file components (.vue files) are supported via ResourceLoader. See Using Vue in MediaWiki more information. Server-side rendering of Vue components (task T286966, task T286963) is not currently possible but is on the Wikimedia Foundation Design System Team's roadmap.
See the Design System Team's page or Phabricator workboard for more information about current work and future changes to Vue-related infrastructure. A new library containing Vue 3 components, design tokens, icons, and documentation is under development and will soon become available for projects within (and beyond) MediaWiki. The library, Codex, is managed by the Design Systems Team and built by collaborators across the community (including the Wikimedia Foundation, Wikimedia Deutschland, and volunteers).
An initial release is planned for early 2022 and will replicate the components and functionality offered by the legacy Wikimedia Foundation Vue component library, Wikimedia Vue UI (WVUI), which is now deprecated and in maintenance mode.