Vue Router transitions are a quick and easy way to add some flair to Vue app. They allow you to add smooth animations/transitions between different pages of your app.
When used correctly, they can enhance the user experience by making your app feel more modern and professional.
In this tutorial, we’ll take a look at the basics of using Vue Router transitions and then we’ll cover a couple basic examples to give you some inspiration on where to start.
Here’s one of the four page transitions that we’ll be creating.
Alright — enough talk. Let’s jump right in.
Adding Vue Router Transitions to Your App
Typically, your…
Any project that is going to be used by fellow developers is going to need some amazing documentation.
The most important thing for any documentation is being well-maintained.
Vue 3 and the new Vite build tool gives us another way.
Introducing Vitepress.
In this quick tutorial, we’ll see how we can use Vitepress to rapidly create documentation for our Vue app.
Here’s what we’ll have at the end of our app.
Excited?
Me too. Let’s get into it.
So what is Vitepress?
Vitepress is a Vue-powered static site generator built on top of Vite.
Called “the little brother of Vuepress” in its documentation (which…
Vue v-model is a directive that provides two-way data binding between an input and form data or between two components.
It’s a simple concept in Vue development, but the true powers of v-model take some time to understand.
By the end of this tutorial, you’ll know all the different use cases for Vue v-model and learn how to use it in your own projects.
Ready?
Me too. Let’s get coding.
What is Vue v-model?
As we were just discussing, Vue v-model is a directive that we can use in template code. …
Adding the right VS Code Extensions to Visual Studio can make your life as a developer so much easier.
They can help with formatting, scalability, enforcing best practices, and so automate so many of the forgettable tasks in our dev process. They can also just be fun extensions that make our code look prettier / easier to write.
As a Vue enthusiast, I’ve spent time looking for the best VS Code Extensions for Vue developers. Here are some of the ones that have made my life so much simpler.
Ready? Let’s jump right in.
Vetur
Admin dashboards are a common use for modern Javascript applications. While you could always spend hours and hours to design your own Vue admin dashboard from scratch, there are so many templates out there that will save you so much time.
Not only do these help save time, but they come with
- Built in components for common uses cases
- Consistent stylings across different views
- Responsive design built in
- Support and documentation
Here are some of my favorite Vue admin dashboards that are out there now.
If there are any admin dashboards that you think I’m missing on this list, please…
Vue3 is officially here! In this announcement by Evan You, he announces the biggest changes in the new framework and talks about the amazing work the whole Vue team has done.
Developers have long been awaiting the really cool features announced for Vue3 like Typescript support, better organization for large projects, and rendering optimizations that make for better Vue apps.
In this Vue3 tutorial, we’ll be building a search system that uses a text input to filter articles from an array.
By the end of this tutorial, you’ll have created a Vue3 project, built two components with the Composition API.
…
Lifecycle hooks in both Vue2 and Vue3 work very similarly — we still have access to the same hooks and we still want to use them for the same use cases.
If our project uses the Options API, we don’t have to change any of the code for our Vue lifecycle hooks. This is because Vue3 is designed to be compatible with prior releases of Vue.
However, the way we access these hooks is a little bit different when we decide to use the Composition API — which is especially useful in larger Vue projects.
By the end of this…
One of the new features of Vue3 that has been talked about for a while is the idea of Portals — or ways to move template HTML to different parts of the DOM. Portals, which are a common feature in React, were available in Vue2 under the portal-vue library.
Now in Vue3, there is native support for this concept using the Teleport feature.
In this tutorial, we’ll cover:
- The purpose of Teleport
- A basic example of Teleport
- Some cool code interactions
Here’s an example of what we’ll be making.
GitHub Pages is a great free option to deploy your Vue application. It’s a static site hosting service that takes files straight from a repository on GitHub.
A great part about Github Pages is that it’s pretty easy to set up once you know how it works. And that’s what we’re going to do today!
In this tutorial, we’re going to cover:
- The basics of Github Pages
- Setting up a Vue project to work with Github Pages
- Deploying a Vue project
- Configuring Vue Router in this deployment environment
A lot of these steps are based on this great article by…
If you’ve ever caught yourself on social media for way too long, chances are the site you were on was using an infinite scrolling component.
An infinite scrolling component is when new content is loaded as the user scrolls down the page as opposed to separating it out into multiple pages.
They are highly effective for specific types of content such as user-generated content.
Here’s an example of what infinite scrolling is.
