I hope you are fine. I want to send a get request in nuxt3 without using composition api but I don't know how to do that. I will thank anyone who give me a piece of guidance.
Thanks.
async getPosters(){
const results = await this.$axios.get('posters')
this.posters = results.data
},
Write your code as you were used too with just Options API, nothing have changed on that matter.
You can totally use Options API while using Vue3/Nuxt3. They may have some small changes but nothing too major for a simple task of querying a backend.
It looks like this is more of an issue with trying to load Axios rather than it is with the composition API. Nuxt 3 makes Axios a redundant module.
Since Fetch is the go-to considered method of requesting data in Nuxt3, have you tried changing the method of your request? It means having to load one less module for your project, and will make it a lot easier to transition between SSR and Static in the future. If not, it might be worth using the previous version of Nuxt.
Here's the documentation: https://v3.nuxtjs.org/getting-started/data-fetching in Nuxt 3.
Related
So basically I have a simple vue app that is going to make requests to an API.
As there is no authentication, I need to make sure that during the vue app's life cycle (basically while the browser is open) the app will have access to some unique identifier that can be sent to the server.
In this way, the API will understand that it is the same "user" that is making requests.
As Im totally new to vue Im not really sure how I can accomplish this.
My first idea was to add code inside some global file (for example /src/App.vue) that could look like this:
if(!window.localStorage.getItem('session_id')){
let random = Array(5).fill().map(n=>(Math.random()*36|0).toString(36)).join('')
window.localStorage.setItem('session_id', random)
}
And then, when making API requests, I would attach it this way:
//pseudo code
request.header('session_id', window.localStorage.getItem('session_id')).get('endpoint1')
Is this the way to go? Or there are better ways?
I am developing VUE PWA (with VUE-CLI) and I need to fetch different data depending on provided params. Let me explain what I need, I have http://localhost:8080/proconnect/ (I changed publicPath: '/proconnect/' in my vue.config.js and it works fine, but I need to grab different data from API depending on param. I try to use simple GET params like this http://localhost:8080/proconnect/?code=123, this works fine in a browser, but when I install PWA on my computer as an app it loads without GET param.
I use PHP for the backend. The app works fine when it built on the server.
I need to pass param somehow to my app to fetch different data. I don't mind to use different subdomains or another way to solve this issue. I will appreciate any suggestions.
Thanks!
If you are using vue-router, a simple way to get the params is by using the useRoute hook. https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup
I want to create a public facing API to fetch product, category etc. using strapi v4 graphql plugin.
I can disable some crud queries in the src/index.js file using the example here.
However I don't know how to disable the queries and mutations of things that are not part of shadowCRUD such as uploadFile, uploadFolder, i18Nlocale, usersPermissions, register, login etc.
How can I achieve this in strapi v4 (v4.3.4 as of right now)
extensionService.shadowCRUD('plugin::users-permissions.role').disableQueries();
extensionService.shadowCRUD('plugin::i18n.locale').disableQueries();
extensionService.shadowCRUD('plugin::upload.folder').disableQueries();
extensionService.shadowCRUD('plugin::upload.folder').disableMutations();
extensionService.shadowCRUD('plugin::upload.file').disableMutations();
extensionService.shadowCRUD('plugin::upload.file').disableQueries();
Adding these lines did help but still some of the non-content specific mutations are there (userPermissionsUser, userPermissionsRole). Still, I think there's a much cleaner way to do this somewhere.
I am sorry if this question has already been asked, but i can't seem to find a clear explanation for my problem.
Problem: i have a web page showing a client's problem. This page need data like client ID or problem number to display it in different parts of the page (header, menu, body). This data is obtained with axios calls.
So i have multiple components which need the same data from the same axios call.
I can't understand how it is possible to make one axios call, for client ID for example, and share it with multiple components instead of making an axios call each time i need the data.
Are mixins a solution?
I have tried to use a mixin:
Vue.axiosGet({
methods: {
request: function(url) {
return axios.get(url).then(response => {
return response.data;
});
}
}
});
But now i don't know where or how to store the data i'll get.
EDIT: i forgot to precise that i don't want to use VueX.
You say that you don't want to use Vuex, but why not? I would recommend you use the Vuex store to achieve what you're looking for. A vuex store will cache/hold information in it, meaning that you can easily access it on a different page. Vuex would solve your problem and allow you make a call once, and later access the data. No need to re-invent the wheel, it's an effective way to achieve what you need.
If you really don't wanna use Vuex, there're always solutions like nedb, but I'd strongly recommend Vuex.
I have a vue3-app that serves as the frontend of an asp.net core 2 api.
Much of the requested data gets used by multiple components. And in order not to make multiple identical requests, i want to store the response-data in my vuex-store if it's not in there already.
The problem is, that most of that data changes a lot, so i need to be able to tell vuex to refresh the data after some time.
But i don't want to refresh all of the requested data, since some of it doesn't need to be refreshed as often and some not at all (for example a list of countries).
So what I need is a way to tell vuex wheter i want to save the response of a specific axios request forever, or to re-request it after a set amount of time.
My questions are: Is there a plugin for this that I couldn't find? And if not, how could i implement the described functionality without rewriting it for every request?
There are some axios cache projects available:
axios-extensions (LRUCache)
axios-cache-adapter (localforage)
cachios (node-cache)
The 2 most popular currently are axios-extensions and axios-cache-adapter
Source of the chart
There is a library axios-cache-adapter that is a plugin for axios, to allow caching responses.
It is a great solution for implementing caching layer that takes care of validating cache outside of application's data storage logic and leverages it to requets library instead.
It can be used with both localstorage and indexedDB (via localforage library)