Archive search

Find the stories you need

story

3 Years of VueJS (2021)

Have you ever wondered what a complex vue js application really looks like?

Today I’m happy to take a deep dive into the architecture of Diffgram’s Open Annotation UI. This is intended for people who are curious about VueJS at scale.

#58: What’s New in Vue 3 Ecosystem: Introducing Vite 2 with Evan You

Some exciting changes have been happening with Vite 2, and here to walk us through them is Evan You, creator of Vue.js. In this jam-packed episode, Evan talks about the decision to make Vite 2 a framework-agnostic build tool. We hear about what went into this, and Evan unpacks some of the features that come with this development.

Write Vue like you write React

A short article that showcases how Vue with Composition-API and JSX compares to React with hooks. If you have some React friends that are big fans of React hooks that you want to convince to give Vue a try, you might show them this!

Deep dive into the new zenith-watches.com

That one isn’t really all about Vue, but is an interesting piece nonetheless. The author explains the whole architecture of the new Zenith website, their usage of Vue-Storefront, and how it all works together.

Evan You · The ReadME Project · GitHub

A while ago GitHub has started publishing community profiles of influential open-source contributors. Here’s the profile of Evan You, the author of Vue that goes into the story of Vue, how it started and how working on it looks like right now.

How Does Vite Work - A Comparison to Webpack

Here’s a pretty interesting article on how Vite is different from webpack to help you better understand the way those two tools work.

Where will Vue go in 2021?

The world of Vue: what we're grateful for in 2020 and excited about for 2021.

From Vue to Nuxt: Server-side rendering in a nutshell

Server-side rendering has been here for a while now and thanks to frameworks like Nuxt.js, making use of it is easier than ever. But do you fully understand how SSR works underneath? Here’s an article that can help with that!

Diving into the Virtual DOM

Dive in and explore Vue's Virtual DOM with a recursive algorithm.

Vue.js Creator Evan You Interview: “You need to understand what your users want”

We spoke with Evan about the release of Vue 3, his opinion on no-backend & fullstack approaches, Vue use cases and the work-life balance of the creator of the technology.

Watch with @vue/reactivity

A brief intro to how the Vue reactivity system works and a guide to implementing the (missing) watch on your own.

How a DevTools Extension is Made

This is a guide through the main parts of the official Vue DevTools extension to learn from it and understand a successful approach for building these kinds of tools.

Make Libraries Work with Vue 2 and 3

Probably my favorite news this week! Anthony Fu created Vue-Demi. A utility library that allows you to ship 1 version of your Vue library that will support both Vue 2.x and Vue 3.0 at the same time. All you have to do is change your composition-api imports from either “vue” or “@vue/composition-api“ to “vue-demi”. The library will automatically use the available source for those functions based on the environment. Can’t wait to try it out with the new Vuelidate version.

Vetur: status quo, development, sponsorship and direction

Vetur is likely known to everyone who uses Visual Studio Code to work with Vue – it’s an extension that supercharges your editor with numerous features. Read about the future plans for the extension written by the creator – Pine Wu.

⭐️ If you would like to support his work on Vetur and the Vue Language Server, you can now support Pine through GitHub sponsorship!

The process: Making Vue 3 – Increment: Frontend

Would you like to learn more about the decision making and the development process of the upcoming Vue v3.0? Here are the lessons learned from rewriting the next major version of Vue.js, written by Evan You.

Introducing Vue Formulate — Truly Delightful Form Authoring

Let's take a closer look at Vue Formulate and the problems it promises to solve for us.

The case for HOC vs The Composition API

In this article Abdelrahman compares Higher-Order Components (using scoped-slots) with the upcoming Composition API. I especially enjoyed the Vee-Validate v4 comparison. Check it out!

Episode #5: Productivity Tools, Workflows & Tabs vs Spaces

One of the things we love most as developers are our tools! In this episode, we talk about some of our favorite productivity tools, debate the merits of different keyboard layouts, how we work as developers and more. And yes, we even tackle the infamous tabs vs spaces debate.

The #4 episode with Divya Sasidharan about JAMstack, MCing conferences and Vuex is also available here.

Vue.js: The Documentary

Vue.js: The Documentary

What began as a side project of a Google developer now shares the JS leaderboard with #React and #Angular... With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story of how he fought against the odds to bring #Vuejs to life.

Mastering Volatile Docs Through Automation

We all know that for the success of software, documentation is extremely important. What you might not know yet, though, is how to keep always docs up to date through the constant changes of your project. If you're interested, Eduard from Storefront UI shares some valuable pieces of experience on the topic – be sure to have a read!

An interview with Eduardo

Our core team member Eduardo San Martin Morote (or @posva as he's arguably better known as) got interviewed by Tim Benniks and shared quote some interesting stuff! For example, did you know he speaks two mother tongues, French and Spanish? Or that he's committing 50% of his time for Vue and has a Patreon? Or the incredible fact that he looks almost identical to Matthew Broderick in his heyday? (OK, it was actually me who discovered this, but still).

Vue.js: The Documentary (TRAILER)

Well, what do you know! The amazing folks at Honeypot.io have created a documentary dedicated to our beloved framework and shared with us a sneak peek. In this trailer you'll meet Vue's creator and BDFL Evan You (in his glorious slippers!), core members Thorsten Lünborg, Sarah Drasner, Jingjian Zhao, and Gu Yiling, as well as other famous tech people like the one and only Taylor Otwell – I doubt he needs an introduction. Be sure to check out the full documentary which is set to be released this February 24th!

Vue 3 — The New Store

Here’s an interesting article on how you might be able to build your own Vuex alternative using the tools that Vue 3.0 provides you. Some people even predict that considering how straight-forward this is, Vuex might become unnecessary for certain projects and other alternatives might emerge.

Portal - a new feature in Vue 3

Have you played the Portal game. There’s a similar concept for web frameworks, where you are able to teleport a component to a different location in the DOM? This is especially useful for modals (so it’s easier to manage things like z-index). Did you know we will likely get those in Vue 3.0 built-in? But until then, check out the portal-vue library.

How to reuse one Vue.js codebase across multiple apps

Thomas Holland returns with another article on Vue.js app architecture. I loved his previous article on Domain-driven development and this week he speaks about code re-usability but not in just one app, but multiple of those.

This Month in Vue - November 2019

As you have probably noticed, the Vue.js News podcast is now released on a monthly cycle along with an article that sums up the most interesting news and stories from the past month. Here it is for November. Check it out!

129: Evan You - What's Coming in Vue.js 3.0

In this episode, Adam talks to Evan You about all of the changes and improvements coming to Vue.js 3.0.

Suspense - new feature in Vue 3

In this article, we take a deep dive into the new Suspense feature that will be shipped with Vue.js 3. Suspense is a special component that renders a fallback content instead of your component until a condition is met.

VueJS London 2019

Missed Vue.js London this year like I did? Or maybe you’ve been there and just want to remind yourself of all the great content presented there? Check out this summary article by Elke Heymans.

Faster Web Applications with Vue 3

Want to be ahead of the optimization game? Vue 3 will bring some pretty good performance boosts and we already have a glimpse of them. Follow Filip and his rundown of the changes Vue 3 will go through, to make your apps faster. A note from Evan You though – the time slicing feature is on hold for now.

Big Giant Vue Apps

Architecting a very large application isn’t an easy task, especially if it consists of apps dedicated for multiple platforms – in one repo. If you’d like to learn how Jacob has solved this problem, check out this article.

Easily build unique, accessible, and lightweight Vue components

Probably we all had this issue, where we had to pick either an existing component library or build everything ourselves to fulfill the requirements. Especially if we care about accessibility (and we should!). In this article, Austin suggest the usage of Vuetensils – a component framework that by itself is completely bare (when it comes to how it looks) and instead focuses accessible and easy to style.

Composing Components in Vue.js

Component Composition can be understood in two ways. Usually people think about composing a component using mixins (and soon composition functions thanks to the upcoming Composition API). However, what I would like to talk about is composition where we connect several components together to form a new one that combines the functionalities of the smaller components. But let’s start from the beginning – the why.

Video: Looking into the Vueture: Composition Functions

Watch the talk by Natalia Tepluhina about Vue 3 titled "Looking into the Vueture: Composition Functions" from ComponentsConf 2019

Vue.js for Angular Developers

If you’re coming from an Anguler background or have some friends that do, you might be interested in this article. It walks you through building a ToDo application while at the same time, the author compares how different Vue features/patterns have their matching equivalent in Angular.

Learning Vue as a React Developer

Both Vue and React share many similarities and solve same problems, but often approach those in different ways. This article highlights those differences. If you have some friends that use React and would like to learn a thing or two about Vue – show it to them.

Views on Vue 073: Contributing to Open Source with Debbie O'Brien

Debbie is an inspiring person and in this episode of Views on Vue, she’s sharing her story on how she got involved in open-source, became a webpack contributor, started creating Vue courses and giving talks on Nuxt.js. Very insightful conversation.

Understanding data flow in Vuex

Here’s a very short and simple graphical explanation to how the data flow in Vuex works. If you had some troubles understanding Vuex or know someone who has, this should definitely help shine some light on it.

The Quickest, Dirtiest, Automatic…est Vue Documenter Ever

This one is a rather interesting approach to documenting your Vue components. I’m not exactly convinced by actually putting the documentation required information inside your production code, but I assume this could potentially be somehow fixed with a webpack plugin. Still an interesting concept!

Advanced Vue: Controlling Parent Slots (Case Study)

Here’s a great article by Michael Thiessen that explains one of my favorite tricks when it comes to composing components – inversion of control. Great read, though it might feel a bit advanced. But once you get this, lots of new patterns will come to your mind. Highly recommended!

The Way of the Fox: The Vue Vixens Curriculum

Knowing something and being able to teach it are two quite different things. There are, however, methods that you can learn to improve your teaching skills. In this article, Jen Looper shares some of the techniques that they are using within the Vue Vixens initiative.

Next-generation async functions with Vue Async Function

Even though the Vue Function API isn’t here yet, the community has already started picking it up thanks to the vue-function-api library that allows you to use it before it ships in Vue 3.0. Here’s a great article that explores how it can be used to build async functions for data fetching inspired by React-Async.

Migrating from Vuetify to Quasar

If you ever thought about migrating your app to Quasar, here’s an interesting story of how it could look like.

What does the Vue function API feel like

Here’s another great article on the proposed function API. And here, you can even try it out yourself, since the author has created a working proof of concept of the new features using the existing Vue.js v2.6 API. Pretty impressive, but definitely not something you should use in your app. Still, it can help you grasp the bigger idea of what’s possible.

Vue's Darkest Day

Going back to the Vue 3.0 RFC outcry – here’s a pretty great write-up that summarizes the proposed changes and how those could affect the future of building Vue components. I think the article should give you a pretty decent look at all the benefits of an API like this, with no drawbacks – since the API is fully additive – no breaking changes, no need to rewrite your code.

Why donations are important

Chances are pretty good that you are a fan of open source technology. In order for any open source project to be truly sustainable though, it needs to be supported financially in some way. In this post, Quasar writes about its thoughts on open source and the importance of donations.

The Paradox of Abstraction: When Good Code is Bad Code

You know that feeling when you're on top of the world because you have refactored all this code and abstracted all this logic into a few lines of code? Well it turns out there's a paradox with how valuable it is in the big picture. Michael Thiessen's post is a great reminder of how abstractions can be more harmful when we're not careful.

That shouldn’t work! Oh, Vue binds all methods?

If you come from a heavy JavaScript background you might have had this WTF moment Jason Pettett mentions, when seeing the way how "this" behaves inside a Vue components and how different it is compared to how it’s suppose to behave normally.

An introduction to test-driven development with Vue.js

Test-driven development (TDD) is a process where you write tests before you write the associated code. Although the idea might sound easy at first, getting to the point of being able to actually know what tests to write takes a lot of planning. In this article Sarah Dayan will walk you through all the steps of a full TDD cycle, required to fully grasp the benefits of that methodology.

Implementing the Builder Pattern in Vue.js Part 1: Listings

Have you seen the recent talk by Jacob Schatz about design patterns? He mentions he Builder Pattern and here, Markus Oberlehner explores the idea and explainis how it can be useful in your apps.

Thinking in components with Vue.js

This article contains a a brief history of Vue.js for those who are new to the framework and provides a high level overview of single file components.

So What’s New in Vue 2.6?

Vue v2.6 shipped with several new features and changes. Here’s a to-the-point article that sums up all those changes, along with examples where applicable.

Growth-Hack Your Career as a WIT

WIT stands for Woman in Tech. And who's better to talk about growth-hacking your career as a WIT than our lovely Jen, founder and CEO of Vue Vixens, the initiative that creates and hosts workshops to teach Vue.js to under-represented people? Believe me, this article is so well-written and full of solid advice – you don't want to miss it, no matter what your pronoun is!

The Updated State of Vue.js Report is here

State of Vue.js was crafted for developers and technology businesses interested in making educated decisions about adding Vue.js to their stack.

Migrating from Angular to Vue

Here’s a great migration story, of how Fundbox managed to seamlessly migrate from an Angular.js app to Vue, while still being able to keep on schedule with the release schedule of their product. If you’re stuck with working on an app that uses an older framework – you might want to show this story to your manager.

Renderless or Bust! Why Renderless Component Libraries will Make Web Dev Easier and More Inclusive

Renderless components are a pretty new technique in Vue, but at the same time it’s an incredibly powerful one. It allows for a smooth separation of the logic and the user interface that consumes it. Might prove extremely powerful for open-source libraries.

One year with Vue.js

Wondering how others have been using Vue? In this article Petr Stříbný is sharing his experience after using Vue for a year. There are some really inspiring conclusions like opting for a framework-agnostic validation library or creating a set of utility functions to be used within Vuex.

What Hooks Mean for Vue

Hooks (not to be confused with lifecycle hooks) became a huge news for React and they are likely to be introduced into Vue in the not so distant future. However, I’ve seen people questioning the potential usefulness of hooks, given that Vue already has mixins that solve a similar problem. However, mixins also come with several drawbacks. Check out this great article to learn more about what problems hooks can solve and how without all the cons of using mixins.

Rebuilding My Blog in Vue: Part 1

A new series where Michael Thiessen goes through several strategies and tools for building a blog as an alternative to Gatsby. The contenders: Vuepress, Gridsome, Nuxt and Vue-CLI. If you plan on build a blog-like website yourself, this is something to keep track of.

10 Best Tips for Learning Vue from Vue Masters

If you were to share a tip to those learning Vue, what would it be? Gregg Pollack from VueMastery has asked this question to several experienced Vue developers. You can find their answers in this article.

Taking on Google and Facebook as a Solo Open-Source Founder with Evan You of Vue.js

A great audio interview with Evan You on the Indie Hackers Podcast!

Structuring a Vue project — Authentication

Authentication is a common problem that is quite hard to get right. In this article, Boris Savic explains how he solved the problem, including how create protected routes, use Vuex to store authentication state and some additional tips like how to refresh expired access tokens when the API returns a 401 error. Great writeup!

Best Code Editor for Vue.js – Vue Mastery

With a growing number of quality code editors to choose from, you might be wondering what’s the best code editor for Vue.js. This week Adam Jahr published a brief blog post with his thoughts and how to get started with it.

VeeValidate 2.1: Validation Providers

A very interesting article that covers how the new addition to VeeValidate, namely Validation Components. It’s an interesting idea that makes ti possible to use components with scoped-slots to provide your form with customised validation rules and more!

$1m to pay open source maintainers on Tidelift

Tidelift is an interesting new service that looks to connect open-source maintainers with companies that use their libraries, offering benefits for both sides. If you happen to be maintaining an open-source project, you can check whether you’re eligible for a monthly payout right now on their website.

Can A Vue Template Have Multiple Root Nodes (Fragments)?

Normally you can’t have multiple root nodes inside your component template. However, there are ways to go around that using render functions or the recently released vue-fragments plugin.

7 Frontend Architecture Lessons From Nuxt.js

A great article by Kevin Ball where he goes through some of the design decisions and patterns that drive the Nuxt.js framework. This article works great with the previous one by Krutie Patel.

Vue.js D&D Combat Simulator

Robert Zehnder was looking to start a new Vue learning project, and tapping on his childhood passion of Dungeons and Dragons he decided to build a combat simulator using the 5th edition Dungeons & Dragons systems reference document.