Sign in

teaching web dev at | sharing my content creation tips at

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…

Photo by Andrik Langfield on Unsplash

In Vue, there are two ways to conditionally render parts of your app: v-if and v-show.

You may be wondering, “Why do we need two ways to this?”

And this is a fantastic question, and definitely one that I had when learning Vue. And the answer is because even though these directives have the similar end results, the way they conditionally show your content works differently.

In this tutorial, we’ll take a look at what conditional rendering is, how v-if and v-show work, and when you should use each one.

Alright, let’s jump right in.

So what even is conditional rendering?

Conditional rendering is the ability…

A Beginner’s Guide to APIs with Vue.js

Axios is one of the most popular HTTP request libraries for Javascript, and it’s commonly used to call APIs inside of Vue apps.

In this article, we’re going to be making a Kanye West Quote Generator using Axios in a Vue 3 app. Not only are we going to get some deep inspiration from Ye himself, but we’re going to learn how to connect our Vue apps to APIs and even learn how to better organize your Vue project with reusable API calls.

Let’s jump right into the code.

Setting Up Our First Basic HTTP Request

The first thing we have to do is install Axios into…

I’ve been making content online ever since I was 9: programming websites, posting my side projects, anything really. And for a majority of that time nobody saw it. not because it wasn’t public, just because no one was interested.

But safe to say since then, I’ve learned a couple of things about finding your audience online.

Most recently with my site,, i’ve been able to grow to thousands of views a day.

In this post, i want to focus on learnvue’s first month — where it got over 10K views as a brand new website.

But first, let’s…

Vite + Electron quick start guide

Desktop computer on desk
Desktop computer on desk
Photo by Sora Sagano on Unsplash.

Hey, devs!

In this article, we’re going to be taking a look at how to build a Vue 3 desktop project from a Vite app.

To do this, we’re going to be using Electron — one of the most popular frameworks for building cross-platform desktop apps with JavaScript. So many popular apps use Electron, like VS Code, Slack, Twitch, and a ton more.

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