I have Vue template that that should send some data to server. I would like to move it in separate vue instance. Like:
var authorization = new Vue({
//
})
Would it be good practice to place some data binding from new component with data from template?
I create app and decided to put in it auth (declarated in template). Is it's good?
What is the best way to put some sub-apps-modules in Vue App?
I know this is a pretty old question, but if I understand you right, you wan´t a seperate app to comunicate with the server, so with your database?
If that is the case, then you should just work with an API which includes services you can call from your app with Axios.
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 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 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.
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 ReactNative app that is working with some constants,
export const BEARER_TOKEN = 'eyJhbGciOiJIU***'
The app works fine until I need to update the token so with a new version distributed by appcenter,
If I just update the app, it keeps the old token
but
If I delete and install a new version, the new token is used
So, how can I make sure that the new token gets loaded? like if the app starts reload constants?
Thanks.
I suggest using Asyncstorage and Redux state in order to maintain your Bearer_Token.
For instance, assume using the Facebook app.
You are logging in for the very first time. Capture and store your Bearer_token in Asyncstorage and also maintain in the redux state.
Next time when you kill the app and open again. Load the Bearer_Token from Asyncstorage.
Your Bearer_Token will be set dynamically.
You can't, with this approach. This is the nature of javascript, it loads everything initially and even if you change it by putting the variable in object. It is a bad practice.
The better approach is to use redux or context api,
I see you want to use BEARER_TOKEN, for user authentication probably.
So you can have a state, authUser inside your redux and it will keep track of the token in your entire app. This approach is very useful when you want the user to logout if any change in authToken.
https://redux.js.org/
For a simple version, you can use context api from react.
now the third option, If you really really really want to not use these approaches.
You can just usewindow.token = 'sdfasdf';
then whenever you want to change it, just use window.token = 'soemthing else'from other files.