Sign in

teaching web dev at | sharing my content creation tips at

VueUse is an open-source project by Anthony Fu that provides Vue developers with a huge collection of essential Composition API utility functions for both Vue 2 and Vue 3.

Photo by WrongTog on Unsplash

Using Vue 3’s defineAsyncComponent feature lets us lazy load components. This means that they're only loaded from the server when they're needed.

This is a great way to improve initial page loads as our app will be loaded in smaller chunks rather than having to load every single component when the page loads.

Photo by Emile Perron on Unsplash

Vue Template Refs give our Javascript code a reference to easily access the template. For example, if we needed quick access to a component or HTML element, template refs is the perfect solution.

In Vue 3, the Composition API gives us another way to use template refs. It joins the concept of reactive refs and template refs giving us just one syntax in our Javascript for both situations.

In this tutorial, we’ll be learning all about template refs: how to use them in both the Options API and Composition API, some advanced refs techniques, as well as look at good…

Photo by Christopher Gower on Unsplash

Plugins are a great way to add reusable functionality to your Vue apps. With tons of existing plugins for components, routing, and more, the ecosystem for Vue has solutions for many common use cases.

Some examples of commonly used plugins are vue-router, vue custom-element, and vue-touch.

However, there will come a time when there isn’t a plugin that perfectly matches your project, or a time when you want to build your own plugins and share them with the world.

In this tutorial, we’ll be taking a look at how to build your very own Vue 3 plugin.

What can we do with Vue plugins?

Simply put, Vue…

Allowing users to create their own profiles is a common use case for many modern web apps. Trying to set this up on your own custom database can a little tricky — dealing with persistence, O-Auth, and encryption.

Luckily for us Vue developers, we can easily add Firebase to our Vue app. This means we can create a simple Vue and Firebase authentication system that supports so many of these standard use cases out of the box.

In this tutorial, we’re going to cover the ins and outs of adding Firebase authentication to your Vue 3 app.

We’ll be building…

Photo by Joshua Aragon on Unsplash

When working in the Vue 3 Composition API, there are brand new ways to access component functionality. In this article, we’ll be taking a look at the setup function’s context argument.

These changes are necessary because, in the Composition API, we don’t have the same reference to this as we do in the Options API.

In the Options API, we could call console.log(this) in any of the options and get a reference to the component itself - giving us access to its props, computed properties, data, and more.

export default { 
props: { lastName: String, }…

Photo by Maik Jonietz on Unsplash

The Single File Component Styles RFC gives us Vue developers a way to use a component’s reactive data as CSS variables.

In just one simple syntax, we can update styles at runtime in Vue 3.

This proposed change takes full advantage of CSS variables, which most modern browsers support, and Vue 3’s reactivity library. Combining the two gives us an easy way to update our styles using our component’s data.

In this guide, we’ll take a look at how we can use these SFC styles, how it works under the hood, and then some advanced knowledge from the RFC.


Photo by Marc Wieland on Unsplash

Let’s speak it into existence. This summer, I will grow my main website — LearnVue.coto over 100,000 monthly pageviews by August 2021. In this article, I’m going to dive into some specific and actionable ways that I intend to make this happen and I hope to give you some ideas for your content strategies, at the same time.

If you’d rather watch a video — here you go…

Still reading? Alright “the book was better” people, let’s start with a little background on where LearnVue stands right now:’s current traffic teaches web programming to thousands of developers every…

If you’ve been working in Vite and Vue 3 recently, you’ll notice that when you start a new project, your script section looks like this with this syntax in your Vue components.

You may be wondering, “What is this? Is this the Options API? Composition API? Where’s the setup method?”

The <script setup> type is a proposed change in Vue’s Git RFCs. To be clear, this is not intended to completely replace any of the current ways to write code. Its purpose is to provide developers with a more concise syntax to write their single file components.


Seriously — I doubled my website traffic without writing any new blog posts.

As a matter of fact, I actually ended up with less blog posts now when I started, and we’re going to look at why.

So long story short, the way that I was able to do this on my first blog — — was that instead of creating new blog posts, I really took a look at the existing content on my site and just made it better — I optimized it for search targeted, better keywords, and other SEO.

However, more important than SEO…

Matt Maribojoc

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store