Vue.js Courses and Tutorials
In today's part of Vue Performance series we will focus on the most exciting framework in Vue.js ecosystem - Nuxt! Specifically we will focus on how it’s Server-Side Rendering (SSR) mechanism impacts performance and what we can do to optimize it. Of course all previous tips from this series are still viable in Nuxt!
In the last couple of months Composition API took Vue community by storm. Thanks to a plugin that brings it’s capabilities to Vue 2 the new API is already supported in many of the most impactful projects from Vue ecosystem like Vuex vue-router or vue-apollo. Unfortunately, despite a very quick adoption Composition API was lacking a proper way of supporting applications that are utilizing Server-Side Rendering. The majority of such applications is written in NuxtJS. The Nuxt core team was very aware of that issue and few months after Composition API plugin for Vue 2 was released they did what they’re doing best - made an awesome module to help their community. In this article I want to introduce @nuxtjs/composition-api module that brings first-class Composition API support to Nuxt.
Until now, the Vue.js Performance series has focused on the bundle size. While it’s certainly one of the most important aspects of app performance it’s not the only one. To build fast web applications, it's not only crucial to serve the smallest possible assets. It's also important to reuse them whenever possible so users won't wait for something that he/she has already downloaded. If you have read the previous parts of this series you most likely know enough about the bundle size to be confident on that field. This is why in this article I will focus on another technique that could significantly improve your loading times - caching.
We are used to certain ways of reusing code. Usually it happens through libraries and components with strictly defined APIs but sometimes thats not enough. Sometimes we want to reuse our whole codebase in a way that lets us adjust it to a special event like Black Friday or just make a slightly different version of our website for a specific country. In cases like that, we usually have very different needs, and being limited by previously defined extension points could make such tasks painful or even impossible.
Being able to automatically inherit all “standard”, unchanged files from a single source of truth and only adding what we want to change when making a new version of our website could drastically reduce the amount of maintained code. In this article, I will show you how to make all of that possible in Nuxt.js in a relatively simple way.
Read more "Build file-based theme inheritance module in Nuxt"
In this article, I will show you how you can test props and custom prop validators in a simple and performant way, without spying on the console error.
Some time ago I wrote an article about state management patterns in Vue. You may or may not know but I’ve been working with Composition API intensively for the past few months while building a new version of Vue Storefront and I thought it might be a good idea to share some of my learnings. The topic I found really interesting is how using Composition API has changed the way I’m managing my application state - both local and global. If you’re curious how different it is from the current mainstream approaches make yourself a coffee and feed your curiosity because today I will share with you how to use Composition API as a replacement for known state management patterns and libraries 🙂
Gridsome is an open source VueJS framework used for building static generated sites. The main focus of Gridsome is that the final website will always be fast, really fast. This is achieved by adding performant features such as code splitting, asset optimization, progressive images, and link prefetching by default. With a Gridsome website you’ll get almost perfect page speed scores which is very important for SEO purposes and user experience nowadays.
Read more "9 reasons to use Gridsome for your next Vue application"
Yesterday Evan You, the creator of Vue.js, announced the first beta version of Vue 3.
Vue 3 comes with great performance improvements and focuses on making developing enterprise applications even smoother and faster. Additionally, it introduces new components and developer-experience focused changes, to delight Vue.js developers of any kind.
In early 2020, there is a lot of discussion and anticipation for Vue 3. Thus I wanted to help the community prepare for the next version of our beloved framework.
Vue 3 brings in a lot of exciting features and changes. By the time of writing, Vue 3 is in alpha version and we expect a beta soon!
I gave a talk, "What you'll love in Vue 3", at Vue Amsterdam and VueConf US earlier this year, about the new features I am the most excited about.
Every Vue application has its state but managing it simply and predictably can be hard. There are many approaches to state management in modern front-end development and it’s easy to get lost in all the available patterns and libraries.
In this post I’ll try to go deep into state management patterns and tools as well as the reasoning behind their existence. This article is very in-depth but I guarantee you that there is at least one thing that you will learn from it.