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
Related
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.
I'm using Nuxt 2.15 with target: "static" and hosting on a shared hosting "hostinger". I fetch the data from an external API using axios and Vuex state management and here comes the problem where the app doesn't load the new data it gets from the API.
How can I make the app rerenders its data and output the newly updated data it gets from fetching the API?
I assume you are using nuxtServerInit or asyncData for getting the data from API. This used with static mode means that data is get only during generation. Which is great for not too often updated content because it doesn't have to connect to server every time it's faster.
Depend on your needs you can:
Get data from API in mounted() hook this will get data from API every time the page is loaded BUT it also means that it could be loaded with some delay and it probably wouldn't be indexed by search engines
You can go with universal mode (https://nuxtjs.org/docs/configuration-glossary/configuration-mode/) and start your site on node.js server which will use up-to-date data from API each time user will open your site.
EDIT: as #kissu corrected me in comment this one is deprecated, please use this one: target:'server' instead of target:'static', which is default so you can just remove this line (https://nuxtjs.org/docs/configuration-glossary/configuration-target/ )
I have a project for which I use VueJS (2.x) for the frontend part.
I've made a component to do some filtering :
And I'd like to be able to change the URL according to the filters, so that I can share the URL and another user would land on the same search. At the stage of my screenshot, the URL should look like : my/long/url?username=test&email=#test. But I don't know how to achieve it.
Currently, when I add/remove a filter, I create a new URLSearchParams object that I commit to the vuex store and with a watch statement I query my backend again with the updated filters.
The thing is that my URL doesn't change, of course, because I do not pass by a this.$router.push(...) or whatever.
Maybe I started it wrong.
What is the good way of achieving this ? Knowing that routing to the same view with a new query part does trigger the error DuplicateNavigation...
Thanks in advance for your help :)
I had achieved something similar to this by using the history.pushState
This basically allows you to modify your URL even if you are not using $router.push
You can follow the URL for more details
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
Firstly, I am new in nuxt. What I am trying to do is for every refresh I want to fetch data by calling api and set data to vuex store.
If I call it from mounted hook then all my problems will be solved but I want to take advantages of SSR in nuxt. What I want is to fetch data on server side and use it on client side.
There are two solutions for that- fetch (depricated) and anonymous middleware. It works fine when it is for server side application. My mode is Universal and target is static, for this configuration, what it does is, during npm run generate it calls the api and save the data for one time and use it for my static site.
Main problem is when my data changes, it does not reflect. How to solve this problem efficiently in nuxt by taking the advantage of SSR for load data on every page refresh.
And another problem to address, when I refresh my page other than '/', it shows the view of index.vue. How to overcome this problem?
I wanted to know if there is a way to dynamically generate routes based on data from a database?
Currently, i am defining my routes in a routes file and then importing that into my vue project. Is there a way i can have specific configurations stored on a database such as the path, name, meta data and then when the application loads, depending on the auth level of the user, create routes for that user?
Reason why I'm asking to create and not use a pre-written route with params is because i want to give my users (at some point in the future) the ability to create their own pages from my system.
So just wanted to know from the community if there is a way to do this based on an axios call or something?
You can just use dynamic routing. To create new templates, code must be changed anyway.
I think technically you are still better off using a title parameter with a common prefix and just looking up that title. In theory it sounds nice to have a completely dynamic application where anyone can create any page... until someone decides to use "login" as the page name and override your own login component, making the app unusable.
That said, you can use router.addRoutes to dynamically add routes to your router. Create a router with the static routes (e.g. your homepage, your login page, your 404 page), then extend your router based on an api call.