I am trying to access $axios in Vue composition API without using useContext() because the current app is not a Nuxt app and is like a library that either can be used inside a Nuxt app or Vue app. So if I use $axios in the code then in Nuxt app it can be called serverside too. if anyone can help it would be very helpful, even if we can made this mechanism with inject/provide.
Nuxt 3 officially recommends using $fetch for making http request
Note that $fetch is the preferred way to make HTTP calls in Nuxt 3 instead of #nuxt/http and #nuxtjs/axios that are made for Nuxt 2.
https://nuxt.com/docs/api/utils/dollarfetch
However if you want to set it up for example to add headers, you can create a composable and work with it throughout the nuxt app
import axios from "axios";
export const $axios = axios.create({
baseURL: BASE_URL,
headers: {
...headers
},
});
Related
I'm trying to create customElements in Vue3 with some http request.
I'dont have any App.vue file because this project only build customElement and serve builded file with small nodejs app.
I'm trying to reach my http clint in my Example.ce.vue.
Vue3 doesnt support globalProperty so i dont have any other idea.
I searched it but can not find any example to set global axios client without App.vue . Can someone help me about that?
I want to do a project by nuxt and vue but I have a question that can I use nuxt with Vue3 without using composition API?
Yes, you totally can.
Composition API is an opt-in. You may see a lot of composition API examples but you can totally use Options API still.
I am working on an app right now I just want to know is it possible to create a separate backend for the next js application because I want to connect react native app and web application with the same backend. Is it possible? and can I use getinitialprops and server-side props while having separate backend???
Yes, you can.
API Routes of Next Js can be use as backend, but it is optional.
getinitialprops, getServerSideProps, getStaticProps, are fetching methods of Next Js to handle the data and APIs in a headless way, so you can use any backend that expose an API.
Here are few ides for the arquitecture:
Next JS for webapp and Backend, React Native fetching Next Js API Routes
Next JS and react native in one project https://docs.expo.dev/guides/using-nextjs/ and any backend that you want to use
The last is project for each (Next, React Native, Backend)
Backend is all about having the data. Nextjs has many fetching methods for both server side rendering and static generation. To fetch the data from backend, you can go with getStaticProps, getServerSideProps or getInitialProps. You can also fetch data locally by providing a simple json file within the application.
I have a web app that is only accessible to authorized users with a login. I would like to be able to share a link to a specific, isolated page/route in this app that everyone with the link should be able to access, without login and authorization, and without being able to navigate anywhere else in the app.
My app is server side rendered and based on a Nuxt and Vue environment.
How might i go about doing this? Is it possible to achieve this solely through the auth module of Nuxt, or are there other/better ways to implement this type of behaviour?
Thanks in advance for any advice and tips!
Yes, it's possible with the nuxt auth module. Just add auth:false in the page(Only works under /pages directory) you want to be accessible with/without authorization.
<script>
export default {
name:'setup',
auth: false,
// ... data, methods etc.
};
</script>
So I have working app hosted on aws as static website. Currently it is publicly available, but I wanted to have authentication mechanism, so when user is not currently logged in it will show him login page instead. From following the aws documentation it seems that process requires to have some of additional front end frameworks such as react, vue etc? Is it possible to just use plain javascript to achieve the same results?
You can use the built in components for React, Vue and Angular.
If your app does not use these frameworks, its still possible to use vanilla js.
You need to import
import { Auth } from 'aws-amplify';
Then you can use the methods on the Auth class (https://aws-amplify.github.io/amplify-js/api/classes/authclass.html) independent of the react etc. controls.
For example, to sign up, you would use Auth.signUp and to sign in, you would use Auth.signIn
The AWS documentation for this is at https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js