Vue.js
Vue.js is a lightweight frontend JavaScript framework. It can be used to develop modular UI components or entire Single Page Applications (SPAs). It features an incrementally adoptable architecture that focuses on declarative rendering and component composition. Advanced features such as routing, state management, build tooling, animations, and validations are offered via officially maintained libraries and packages.
If you know HTML, CSS, and JS, it's easy to get started with Vue.js. Because of it's lean design, it takes up only a few tens of kilobytes. It's fast. It's open source and community led. It integrates well with other tools. It's also being used to build mobile apps.
Discussion
-
What's the benefit of using Vue.js over vanilla JavaScript?
JavaScript enabled us to add more dynamic content to web pages plus have rich user interactions. With vanilla JS, this came with increased code complexity and low maintainability. For example, to add interactions we would need to link event handlers to DOM elements, code these handlers (using vanilla JS or jQuery for example), make AJAX calls, handle the responses and update DOM elements. All this was done using hand-crafted code that was difficult to scale and maintain for large projects.
It's to solve this problem that JavaScript frameworks were introduced. Vue.js is one of them, with Angular and React being alternatives. Vue.js is said to be approachable, versatile and performant.
Vue.js is a progressive JS framework. This means that you're not forced to migrate your entire app at once. Instead, you can incrementally migrate some components that need rich interactions. Vue.js plays well with other code. You can use Vue.js code in apps written in other frameworks and also embed other code inside of Vue.js.
-
Who's using Vue and what's been their experience?
In 2017, Vue.js was named the "most willingly learned technology". Companies of all sizes and market domains have adopted Vue.js. This includes Netflix, Facebook, Alibaba, Adobe, Xiaomi, Grammarly, Laracasts, Behance, GitLab, 9gag, Nintendo, Chess, and Font Awesome.
Made With Vue.js showcases lots of projects developed using Vue.js. These include components, frameworks, webapps, websites, games, and more.
A survey of 1,553 responses collected in Nov-Dec 2018 showed that 92% would use Vue.js for their next project. 75% saw ease of integration as the biggest advantage and 58% found it easy to learn and apply. More than half saw documentation, performance and progressiveness as important advantages.
-
How does Vue.js compare against other frontend development frameworks?
The common parameters for comparing various frontend frameworks are features, documentation, developer tooling, adoption, third-party libraries, and community support. While React and Angular are led by Facebook and Google respectively, Vue.js is more community led, though there's a core team to set roadmaps.
For building complex apps, other frameworks such as Ember and Angular provide an opinionated set of components. Vue.js core instead focuses on data binding, similar to React. Outside the core functionality, React leaves everything to the community. This creates churn, with developers not sure what to adopt. Vue.js takes the middle path where the core exposes minimal features and other official libraries offer incrementally adoptable pieces; but developers are not tied to using them. Thus, it's more approachable that React.
It's been said that for migrating AngularJS (not Angular) apps, Vue.js is a natural fit mainly due to similar templating syntax and reactive model. In incremental migration, Vue.js and AngularJS play nicely with each other.
Vue.js is about 80KB while React is 100KB and Angular is 500KB. Hacker Noon offers a detailed comparison of the three frameworks.
-
What are the main features of Vue.js?
Vue essentially extends HTML with components. These are custom elements to which Vue compiler attaches behaviour and binds data. Vue uses templates that are compiled to virtual DOM render functions.
A Vue component also has scripts for defining local data, props, computed properties, watchers, methods, and lifecycle hooks. We can also include component specific styles that are scoped to the component. CSS styling can also use pre-processors such as Less or SCSS. When data changes, CSS transitions and animations can be easily coded with Vue.
Vue adopts the ViewModel part of the Model-View-ViewModel (MVVM) architecture. However, developers can adopt Flux architecture, as is usually the case when using Vuex for state management.
We can use props to pass data down to components. To inform a parent component that some data has changed, use
$emitevents. For more complex communication, use EventBus (for small apps) or Vuex (for large apps).Other useful features are built-in modifiers, mixins, plugins, filters, JSX, and custom directives.
-
What's the Vue.js component lifecycle?
A Vue.js component moves through different states in it's lifetime: created, mounted, updated, destroyed. These states are associated with a number of lifecycle hooks that we can use to execute custom JS code.
Just after a Vue component is instantiated,
beforeCreate()is called. At this point, component has no access to the data model. Once created, thecreated()hook is called, which is a good place to load any data. Now, the component is ready to watch data for changes and listen for events.However, the component is still isolated from view layer (the native DOM) and nothing will be displayed. Vue will display the data only when component's mounted. Hooks relevant in this phase are
beforeMount()andmounted(). Once mounted, we can access the$elproperty that helps us update the DOM when necessary.Once mounted, an update cycle is started whenever data is updated. Virtual DOM is updated and differences are patched to the native DOM for efficient rendering. Relevant hooks are
beforeUpdate()andupdated().When component is not longer required in the DOM and being destroyed, we can use hooks
beforeDestroyed()anddestroyed(). -
How is the ecosystem around the core of Vue.js?
The Vue team maintains the Vue.js core that focuses on the view layer. They also maintain other libraries that help you build rich single page applications:
- vue-router: For SPA routing.
- vuex: For large-scale state management.
- vue-cli: To create project scaffolding.
- vue-loader: A loader for webpack. This is useful for Vue components in a format called Single-File Component (SFC), which is a
*.vuefile. - vue-class-component: TypeScript decorator for a class-based API.
- vue-rx: RxJS integration.
- vue-devtools: Browser DevTools extension. This can be a Chrome extension, Firefox addon or standalone Electron app.
- vue-test-utils: For unit testing.
- vue-server-renderer: For building isomorphic or universal JS apps, with app code running on both server and client. As an alternative, there's Nuxt.js, just as React has Next.js.
-
Which are some third-party libraries and tools for Vue developers?
Here are some third-party tools that might interest developers:
- vue-templates: Out-of-the-box templates to avoid manual config and boilerplate.
- vue-dummy: For placeholder text and images.
- VuePress: Static site generator.
- Gridsome: Framework for static sites with GraphQL for data management.
- Vuetify: UI component library based on Material Design.
- Quasar: Framework that enables single codebase for SPAs, PWAs, hybrid mobile apps, desktop apps, etc.
- Storybook: For writing UI components and target multiple frontend frameworks.
- Vue Apollo: Integrate Vue with GraphQL.
- Weex: Framework for building mobile apps with Vue and others.
- Bit: To organize and share components across apps.
- Vue Starter: Boilerplate for production-ready PWAs.
- Vue Design System: A set of tools, patterns, and practices for building UI design systems.
- VS Code / Atom Integration: Vue-related extensions for VS Code and Atom editors, to name just a couple.
-
Could you share some tips and best practices for using Vue.js?
When you reuse components across views, new Vue instances won't be instantiated. Instead, use a custom handler to react to route changes. Avoid manipulating the DOM directly. Instead use
$refs. Use computed properties to manipulate component data. These are also cached from their reactive dependencies. Validate your props.Here are some tips for better performance:
- Loop Items: Use
:keyso that Vue can update items more efficiently. - Functional Components: Cheaper than stateful components. Use these if you're only accepting props and rendering markup.
- Component Registration: Avoid registering all components globally. Import specific components within other components, preferably asynchronously.
- Code Splitting: Split your code into logical parts to reduce JS bundle size. Enables lazy loading.
- Lazy Loading: For local component registration, route declaration and other stuff not needed upfront. Load components as necessary based on user actions.
- SVG: Hide/show elements rather than frequently removing or adding them. A faster alternative to SVG is to use Canvas and WebGL, which are not XML based.
- Loop Items: Use
-
What are some criticisms or concerns with Vue.js?
Traditionally, Vue.js was not suited for building mobile apps. This is changing. Vue's founder, Evan You, commented in March 2019 that Vue.js is already "unofficially" supporting integration with NativeScript, Quasar and Ionic 4.
-
What are some useful resources for a beginner to learn Vue.js?
A good place to start learning Vue.js is to read the official guide. A series of Vue videos on Laracasts is worth studying. Vue Mastery is another useful resource with lots of Vue lessons.
For building SPAs, read Bland's tutorial or Chuchin's tutorial. For building PWAs, read Rajat's tutorial.
For reference, Vue Mastery has released a handy cheat sheet. For ready-to-use themes, Creative Time provides UI kits, templates and dashboards based on Vue.js.
For latest news, follow The Vue Point, the official Vue.js blog.
Developers who wish to contribute, should head to the Vue.js page on GitHub.
Milestones
Evan You at Google Creative Lab starts experimenting with the good parts of Angular, especially it's declarative data binding. He feels that for simple use cases Angular is too heavy and opinionated. It's from here that he creates and names Vue.js.
2014
Evan You releases Vue code on GitHub and shares a link on Hacker News. The project gets several hundred stars within the first week. The actual version is Vue 0.9.0 Animatrix. Since then, Vue releases are code named based on anime names.
2015
Version 1.0.0 Evangelion is released after 300+ commits, 8 alphas, 4 betas and 2 release candidates. API is cleaned up to suit large projects, keeping in mind maintainability and refactoring. For fast initial rendering, v-repeat is replaced with v-for. Apart from the core, vue-loader, vueify and vue-router now provide a good foundation to build Single Page Applications. Also supported are hot component reloading and scoped CSS.
2016
Version 2.0.0 Ghost in the Shell is released. Work on this version started in April. This release includes TypeScript typings and superior rendering performance compared to Vue 1.0. Server-side rendering is possible. There's JSX support via a Babel plugin. The runtime is only 16KB when minified and zipped.
2018
Vue CLI 3.0 is released. It's a rewrite of the older version. The aim is to reduce configuration fatigue and make it easier to work with multiple tools. It provides a pre-configured build setup using Webpack. It supports ES2017 transpilation, polyfills injection, CSS pre-processors, and more. The CLI comes with beta version of a GUI. This deprecates the older vue-cli command.
In February, Vue 2.6.0 Macross is released. Meanwhile, Evan You comments that Vue 3.0 is likely to be released in 2019. It's a rewrite that sees some internal parts becoming individual packages. TypeScript is being used for the new version. You may wish to view a video titled Vue.js in 2019 & Beyond.
Sample Code
- Sample1
- Sample2
-
/* Source: https://vuejs.org/v2/guide/ Accessed: 2019-10-01 */ <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date().toLocaleString() } }) </script>
-
/* Source: https://gist.github.com/techlab23/6ed8bc5b009662fc4cbccbf251c48c2b Accessed: 2019-10-01 */ <template> <div> <h1> {{ message }} </h1> </div> </template> <script> export default { /* Child component registration */ components: {}, /* Properties */ props: [], /* Component's local data */ data() { return { message: 'Thinking in components' } }, /* Watchers */ watch: {}, /* Computed properties */ computed: {}, /* Component methods */ methods: { }, /* Vue lifecycle hooks: Ref: https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks */ created() {}, mounted() {}, updated() {}, destroyed() {} .... } </script> <style scoped> </style>
References
- 9series. 2018. "VUE.JS & Its Features." Blog, 9series, October 15. Accessed 2019-10-01.
- Aker, Lars Røysted. 2018. "Vue.js – lifecycle hooks, the layman’s overview." Blog, Vertica, May 16. Accessed 2019-10-01.
- Amoros, Adrien and Julien Mattiussi. 2019. "What Can React Developers Learn From The Vue.Js Ecosystem?" Blog, Marmelab, April 03. Accessed 2019-10-01.
- Andersen, Bo. 2017. "Vue Instance Lifecycle & Hooks." Coding Explained, April 27. Accessed 2019-10-01.
- Atoyebi, Deji. 2019. "5 useful development tools for Vue.js." LogRocket Blog, June 24. Accessed 2019-10-01.
- Ball, Kevin. 2018. "How to Learn Vue.js in 2018." ZenDev, October 18. Accessed 2019-10-01.
- Ball, Kevin. 2019. "Sliding In And Out Of Vue.js." Smashing Magazine, February 26. Accessed 2019-10-01.
- Bhimani, Kishan. 2018. "Angular V/S Vue V/S React – Choose the Best in 2018." Blog, Azilen, March 21. Accessed 2019-10-01.
- Christensen, Nicky. 2019. "VueJS — Tips & Best Practices." Vue.js Developers, via Medium, May 04. Accessed 2019-10-01.
- Cromwell, Vivian. 2017. "Between the Wires: An interview with Vue.js creator Evan You." freeCodeCamp, May 30. Accessed 2019-10-01.
- DeveloperDrive. 2019. "20 Must-Have Tools for Vue.js Development." DeveloperDrive. Accessed 2019-10-01.
- Findlay, Thomas. 2019. "12 Tips and Tricks to Improve Your Vue Projects." Telerik Blogs, February 25. Accessed 2019-10-01.
- Gawron, Karolina. 2019. "All The Numbers From The State of Vue.js Report 2019." Monterail, March 01. Accessed 2019-10-01.
- Gerchev, Ivaylo. 2019. "10+ Top Vue.js Tools & Libraries." SitePoint, July 23. Accessed 2019-10-01.
- Nigam, Shirish. 2019. "Thinking in components with Vue.js." Medium, April 23. Accessed 2019-10-01.
- Ocel, Rob. 2018. "Why You Should Consider Migrating From AngularJS to Vue." This Dot Media, via Medium, September 21. Accessed 2019-10-01.
- Sajnóg, Michał. 2018. "13 Top Companies That Have Trusted Vue.js – Examples of Applications." Blog, Netguru, March 21. Accessed 2019-10-01.
- Saring, Jonathan. 2018. "5 Tools for Faster Vue.js App Development." Bits and Pieces, via Medium, August 02. Accessed 2019-10-01.
- Shah, Harsh. 2018. "Top 9 Websites Built using Vue.JS." Techuz, August 30. Accessed 2019-10-01.
- Sophia. 2019. "Angular vs React vs Vue: Which is the Best Choice for 2019?" Hacker Noon, July 05. Accessed 2019-10-01.
- Vue. 2015. "Vue.js 1.0.0 Released." Vue, October 26. Accessed 2019-10-01.
- Vue. 2019. "Vue.js Homepage." Accessed 2019-10-01.
- Vue CLI Guide. 2018. "Overview." Vue CLI Guide, July 17. Accessed 2019-10-01.
- Vue GitHub. 2019. "vuejs/vue." Vue GitHub, March 20. Retrieved on 2019-04-14.
- Vue Guide. 2019. "Introduction." Vue.js Guide, v2, September 20. Accessed 2019-10-01.
- Vue Guide. 2019b. "Overview." Vue.js Guide, v1, September 20. Accessed 2019-10-01.
- Vue Mastery. 2017. "What is Vue.js?" Vue Mastery, on Vimeo, December 15. Accessed 2019-10-01.
- Vuex. 2019. "What is Vuex?" Accessed 2019-10-02.
- Webpack Docs. 2019. "Lazy Loading." Webpack, v4.41.0. Accessed 2019-10-02.
- Wikipedia. 2019. "Vue.js." Wikipedia, September 25. Accessed 2019-10-01.
- You, Evan. 2016. "Vue 2.0 is Here!" The Vue Point, via Medium, October 01. Accessed 2019-10-01.
- You, Evan. 2018. "Vue CLI 3.0 is here!" The Vue Point, via Medium, August 10. Accessed 2019-10-01.
- You, Evan. 2018b. "Plans for the Next Iteration of Vue.js." The Vue Point, via Medium, September 30. Accessed 2019-10-01.
Further Reading
- Vue Guide. 2019. "Introduction." Vue.js Guide, v2, September 20. Accessed 2019-10-01.
- Ball, Kevin. 2019. "Sliding In And Out Of Vue.js." Smashing Magazine, February 26. Accessed 2019-10-01.
- Nigam, Shirish. 2019. "Thinking in components with Vue.js." Medium, April 23. Accessed 2019-10-01.
- Sophia. 2019. "Angular vs React vs Vue: Which is the Best Choice for 2019?" Hacker Noon, July 05. Accessed 2019-10-01.
- Findlay, Thomas. 2019. "12 Tips and Tricks to Improve Your Vue Projects." Telerik Blogs, February 25. Accessed 2019-10-01.
- Bland, Jennifer. 2018. "How to build an SPA using Vue.js, Vuex, Vuetify, and Firebase: using Vue Router." freeCodeCamp, November 24. Accessed 2019-10-01.
Article Stats
Author-wise Stats for Article Edits
arvindpdmn
ikumargaurav
Cite As
2 authors
Last updated on
2019-10-03 02:44:50
See Also
- JavaScript
- React
- Angular
- TypeScript
- NativeScript
- Single Page Application