Adding Axios to Quasar

Scott Molinari
Oct 3, 2018 · 3 min read
Image for post
Image for post
Reusable code for any platform!

If you’ve started out with Quasar CLI ‘s init function (or with v1 the create) function to create your project and forgot to enter the check in the box for Axios, no worries. This little tutorial will help you get Axios into your project.

Adding / Installing the Axios Module Package

Naturally, the first thing we’ll need to do is add the Axios package to our node modules. So, let’s do that. Enter the following in your console at your project’s root.

You should end up with something like this, if all went well.

Image for post
Image for post
The console screen after a successful yarn addition of Axios.

Adding the Boot File

Fortunately, we can stay in the console and use the new feature of the Quasar CLI.

1. Enter the following command into your console:

The command should have been carried out quickly, and you should see this in your console.

Image for post
Image for post

Before we follow the nice instructions given to us by the CLI to update quasar.conf.js, let’s go and add our plugin code.

2. With your code editor, open up the newly created axios.js file in the /boot directory. The CLI command we just ran created that file for you. You should see this in the file:

Image for post
Image for post
The empty axios.js file example.

3. Go ahead and replace the code in that file with the following code.

What did we do?

We’re importing the axios module, which we just installed above. We created the instance with a base URL. Then we added the axios object(function) to the prototype of our Vue instance. Finally, we exported the instance for use in any files outside of Vue components (i.e. Vuex).

4. Let’s get back to what the CLI reminded us to do earlier. Open the quasar.conf.js file and go to the boot entry at the top of the file and add axios as an array item for the plugins property. Your entry should look like this:

Image for post
Image for post
Axios entered as a plugin within quasar.conf.js

Save your changes and that’s it! Theoretically, you should now be ready to work with Axios. You can access Axios in your components like so:

Please refer to the Axios documentation for more information about Axios.

And have fun with Quasar! 😃

Quasar Framework

Build high-performance cross-device VueJS user interfaces…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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