Vue.js new script setup with axios

Question

Thanks for reading my question.

I'm trying to get the new <script setup> syntax (Composition API) with Vue.js 3.2 and axios running. With the normal syntax my code looks something like:

<script>
import axios from 'axios'

export default {
  name: 'GetRequest',
  data () {
    return {
      infos: null
    }
  },
  mounted () {
    axios
      .get('https://api.predic8.de/shop/products/')
      .then(response => (this.infos = response.data))
  }
}
</script>
<template>
  <div id="app">
    {{ infos }}
  </div>
</template>

This works just fine, but I use a template (https://github.com/justboil/admin-one-vue-tailwind) for my projekt which works with the new <script setup>.

I already found some solutions like:

<script setup>
 
import {onMounted} from "vue";
 
const {ref} = require("vue");
const axios = require("axios");
const info = ref([])
onMounted(async () => {
  await axios
      .get('https://api.predic8.de/shop/products/')
      .then(response => {
        this.info = response.data
 
      })
})
</script>
<template>
  <div id="app">
    {{ infos }}
  </div>
</template>

but it gives me 'this.infos' is assigned a value but never used. Does anyone know how I can assigne the value to the variabel and call it in the <template>?

Update:

I found the solution by using infos.value instead of this.infos

<script setup>
import {onMounted} from "vue"
 
const {ref} = require("vue")
const axios = require("axios")
const infos = ref([])
onMounted(async () => {
  await axios
    .get('https://api.predic8.de/shop/products/')
    .then(response => {
      infos.value = response.data
    })
})
</script>
<template>
  <div id="app">
    {{ infos }}
  </div>
</template>
```

Hasan Parasteh · Accepted Answer · 2022-01-25 23:06:37Z

5

It's better to use inject for importing axios in each component. This way you can create some interceptors if they needed as well...

First you should install the axios plugin for vue.js.

> npm install --save axios vue-axios

When the installation finished just import the axios like below example:

main.js

import { createApp } from "vue";
import axios from "./plugins/axios";
import VueAxios from "vue-axios";

const app = createApp(App);

// Axios Plugin
app.use(VueAxios, axios);
app.provide("axios", app.config.globalProperties.axios);

inside any component

import { inject } from "vue";

const axios = inject('axios');
// using axios as usual

Note: I used the <script setup> inside the component example.

PS: You can create an axios instance inside the ./plugins/axios.js file if you need to use interceptors otherwise just import the axios as always inside main.js file!

edited Jan 25, 2022 at 23:06

answered Jan 25, 2022 at 22:45

Hasan Parasteh

5498 silver badges33 bronze badges

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

1 Comment

Taraman Over a year ago

Thanks for your help! I consider using the injection for this project.

Kenny Altamirano · Accepted Answer · 2022-01-25 23:28:02Z

0

In your template you are accessing "infos" but the declared variable is "info"
In your onMounted callback your assignment should be without "this" just "info = response.data"

Any variable declared at the top level script would be accesible from the template.

More info here https://v3.vuejs.org/api/sfc-script-setup.htm and here https://v3.vuejs.org/guide/composition-api-setup.html

answered Jan 25, 2022 at 23:28

Kenny Altamirano

11 bronze badge

2 Comments

Taraman Over a year ago

Thank you as well for your help. The missing information was using .value

Elikill58 Over a year ago

@Taraman You can click on the check mark on the left of the answer to say that it's the accepted answer

Collectives™ on Stack Overflow

Vue.js new script setup with axios

Update:

2 Answers 2

main.js

inside any component

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update:

2 Answers 2

main.js

inside any component

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related