Building an app with Vue 3, Axios, Pinia and Vue Router

Overview

Vue 3 is the latest version of the popular Vue framework. In this article, we'll build a simple app using Vue 3 along with some other complementary libraries:

• Axios for making API calls

• Pinia for state management

• Vue Router for routing

Getting Started

Let's start by scaffolding a Vue 3 app using Vue CLI:

vue create my-app

Select Vue 3 as the version. This will generate a basic Vue 3 project for us.

Adding Axios

Axios is a popular library for making HTTP requests in Vue apps. Let's install it:

npm install axios

Then we can make requests in our Vue components like this:

<script>
import axios from 'axios'

axios.get('/some/api/endpoint')
</script>

Adding Pinia for State Management

Pinia is Vue's own state management library, similar to Vuex. Let's install it:

npm install pinia

We can then create a store like this:

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore('counter',()=> {
    const count ref(0);

    function increment() {
      count++
  }
})

And use it in our Vue components by doing:

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
counter.increment()  
</script>

Adding Vue Router

Vue Router is the official router for Vue. Let's install it:

npm install vue-router@4

We can then create routes and navigate between them in our app.

Conclusion

We've now set up a basic Vue 3 app using some essential companion libraries like Axios, Pinia and Vue Router. From here, you can build out the rest of your application!