How to create axios plugin in Vue 3 composition api

Question

I am using Vue 3 composition api and typescript .

I want to make Axios plugin to use in my project .

this is my code

plugins/axios.js

import axios from 'axios'
const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
})
export default {
    install: (app, options) => {
        app.config.globalProperties.$axios={ ...axiosInstance }
    }
}

main.ts

import { createApp } from 'vue'

import axiosPlugin from '@/plugins/axios.js'


import App from './App.vue'

const app = createApp(App)

app.use(axiosPlugin, {})

app.mount('#app')

my component

<script setup lang="ts">
import { $axios } from 'vue'

But I have error in last code section

Module '"vue"' has no exported member '$axios'.ts(2305)

maybe something is wrong in declaring plugin for axios

what's the problem ?

Stutje · Accepted Answer · 2022-08-04 14:33:04Z

4

Your axios plugin is not exposed in the Vue library, so importing is not going to work. Your plugin is hooked to the Vue instance. In Vue 2 (or options API) you could use this keyword but in the setup method you need to use getCurrentInstance. Try this

<script setup lang='ts'>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const axios = app.appContext.config.globalProperties.$axios
</script>

Alternatively you can use provide/inject methods.
In your main.ts

app.provide('axios', axiosInstance);

In your component

import { inject } from 'vue';
const axios = inject('axios');

edited Aug 4, 2022 at 14:33

answered Aug 4, 2022 at 14:04

Stutje

8549 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

morteza mortezaie Over a year ago

i think you meant add app.provide('axios', axiosInstance); in plugin am I right ?

Stutje Over a year ago

yeah, depends on how you see it, check out this link: skirtles-code.github.io/vue-examples/patterns/…

morteza mortezaie Over a year ago

Bur i have type script error in component for axios.get('/') it said "Object is of type 'unknown'.ts(2571)" can you help with that ?

Collectives™ on Stack Overflow

How to create axios plugin in Vue 3 composition api

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related