Is your Vue app currently lacking a loading spinner for when it fetches content from an API? Well you came to the right place, adding in a loading spinner in Vue can be a very simple task and can also be easily used with Vuex for when your API fetches data and performs data transformations. Let’s get started!
I am going to skip going over creating a default Vue project and instead just show the snippets of setup code that are relevant to utilizing a Vue Simple Spinner. This means that I am assuming that you have the Vuex store that we are going to work on already set up in the main.js file.
To start, we are going to need to grab the Vue-Simple-Spinner npm package here, which will be our spinner component. We will also need to grab the Axios npm package as well, which can be found here. Next we will want to create a scenario that can be used for loading, which in our case will be to fetch ‘Movies’ from a backend server API.
We will have the following files: App.vue, which will house our Vue content and store.js, which will hold our Vuex store.
Let’s start on the App.vue file, we will want to create a basic template that holds a list of our movie titles in a div. Additionally, we will want to have a v-if conditional to show a loading spinner if there is a true being returned for loadingStatus, otherwise it will show the list of movies. The template file should look like this:
Next, we will want to create a script element that holds the fetching of our ‘movies’, and the getters for our ‘movies’ and ‘loadingStatus’. We will use a ‘getMovies’ Vuex action to fetch the ‘movies’ and will use a ‘movies’ getter to get the fetched movie objects. Additionally, we will use a ‘loadingStatus’ getter to get the current ‘loadingStatus’. Lastly, we will need to import in our Vue-Simple-Spinner as a local component so that it can be used in the template. Overall, it should look like this:
Now let’s get to the fun part, Vuex. Head on over to your store.js file and import in Vue, Vuex, and Axios, like so:
Next, we will use the Vuex resource with Vue.use(Vuex). And finally, we will start on creating our Vuex Store. We will want to include a default state, which will have ‘loadingStatus’ set to false and ‘movies’ set to an empty array. Next we will need two actions, one for changing the ‘loadingStatus’ and one for moving the fetched raw movies data to the ‘movies’ state array. Now, we are going to need to create our only action, ‘getMovies’. This will be a method that takes in the commit Vuex argument, and will start by committing the ‘loadingStatus’ mutation and changing the ‘loadingStatus’ to true. Next we will return an instance of axios getting our backend ‘movies’ endpoint. From there we will resolve the promise or print out errors. If we resolve the promise we will first, call the ‘getMovies’ mutation to change the ‘movies’ state array to the fetched data, and second, we will call the ‘loadingStatus’ mutation and change the ‘loadingStatus’ to false, as we are finished fetching and transforming the data. Lastly, we will need to create our two getters, ‘movies’ and ‘loadingStatus’. These will simply return the state.movies and state.loadingStatus elements. All of this will look like so:
Wrapping up, you have learned how to create a simple vue loading spinner screen for when you fetch and/or transform data through an API or through your backend. Let’s walk through the process one more time: first, your component is mounted and the ‘getMovies’ action is called and the ‘loadingStatus’ is set to true, second, the data is fetched and added to the ‘movies’ state array and the ‘loadingStatus’ is set to false, and lastly, your App.vue component receives the ‘movies’ data and updated ‘loadingStatus’ and outputs the list of movie titles.
I hope this article was helpful for you and you learned more about Vuex and utilizing loading spinners in Vue. Thank you for reading, happy coding!
