Thanks for reading my question.
I'm trying to get the new <script setup> syntax 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>?
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>
```
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:
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);
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!
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