Quality tutorials & resources. No BS._

Page 2

Preview MP3 with HTML5 Audio Element and VueJS Part 5 of 7 in Your Guide To Uploading Files with VueJS and Axios
Author Dan Pastori avatar
Dan Pastori October 18th, 2021

The next few tutorials will help build the user experience of your file upload system with Axios and VueJS. This tutorial is specifically focuses on previewing and setting an audio file before allowing the user to upload it. Using this method allows the user to preview what their audio file sounds like before they upload the file to the server to ensure they have the right file.

This tutorial is going to assume you’ve followed along with the series thus far, specifically “Uploading Files With VueJS and Axios“. A lot of the methods are going to look the same and function the same way. We will be building a simple VueJS component that allows the user to select an audio file and preview the file before sending it to the server.

Keep Reading →
Break between articles Break between articles
Advanced Vuex 4 Tips
Author Dan Pastori avatar
Dan Pastori September 27th, 2021

So we covered the basics in “Beginning Vuex 4 with Vue 3“, but if you are building a larger app, you might have already run into some issues. Or maybe you started thinking, there has to be a better way? When you start building state in larger applications, complex forms, or individual pages that could be an app themselves, you will end up wanting to store more and more in the state. There are a ton of advanced Vuex 4 practices that can help make this process even easier. Now that we have gotten our feet wet with Vuex, let’s jump into some more of the advanced Vuex 4 use cases and some other awesome features of the state management system!

Keep Reading →
Break between articles
Using Vuex with InertiaJS
Author Dan Pastori avatar
Dan Pastori September 20th, 2021

If you haven’t used InertiaJS before, I’d highly recommend checking it out. It allows you to put together an app in no time at all, saves the headache of structuring an SPA if you don’t need it, and allows you to use VueJS (or other popular frontend frameworks) as your templating engine. And of course, you can actually use Vuex with InertiaJS fairly easily. We actually use InertiaJS with Vuex in Financial Freedom, our self hosted budgeting app and it works great!

Keep Reading →
Break between articles
Watch Nested Component Data with VueJS
Author Dan Pastori avatar
Dan Pastori September 13th, 2021

There are multiple times where you need to watch pieces of data within your VueJS component. However, did you know you can watch nested component data with VueJS? Let’s say you are mapping a data to a model that looks like this:

export default {
    data(){
        return {
            form: {
                name: '',
                dob: '',
                job: ''
            }
        }
    }
}

This is a nice way to handle sending data to an API since all you have to do is pass this.form. However, what if you want to compute values when a piece of the nested data changes or if the whole form changes? Luckily VueJS makes that a breeze. Let’s run through a few examples.

Keep Reading →
Break between articles