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?
Related
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
},
});
In this I have created a flask login portal using flask-login and wtforms.
But my project requires me to develop the frontend using vueJS and not just rendering HTML. Unfortunately, I am unable to find a way to pass the FlaskForm onto the VueJS file so that I can use it in the template. I am not able to Jsonify the FlaskForm object. It would be really nice if someone could help me on this one.
I created a Vue.js app without using Vue CLI, so that means I did everything from scratch including setting up Webpack 4. The reason I did this was because I don't like the idea of frameworks concealing the inner workings of things so that I can't fix things myself.
As an SPA, I have got the basic demo site working with an Home and About view. But I am looking to create a multi-page app with Express. The only information on multi-page Vue.js apps seems to be linked to the pages option that only comes with Vue CLI (see here)
Is there a way to have a multi-page app for projects created without Vue CLI?
Sure, you could handle routing with Express and have the page rendered server-side.
You can use Vue official package for routing, vue-router and choose between SSR (server-side rendering) or client side.
I suggest you to check this official doc about it: https://ssr.vuejs.org/
I'm studying nuxt.
I leave a question because I have a question while studying.
nuxt can ssr, but ssr is known as server side rendering.
Then, I wonder where the server is.
Because vue is built on node, is the server automatically made into node server?
And, how is SEO possible if we make it with nuxt?
I understand that it is possible if you make html with MPA. However, using nuxt makes SEO possible.
So, when you create a project with nuxt, does the client make it an MPA when it makes the first request?
where the server is?
Depends... Nuxt include a node server (nuxt), but you can during the nuxt instalation merge them with other node server frameworks
when use nuxt alone or with other server-side framework?
Depends of your needs, knowledge and project.
For example I usually use nuxt alone, more apollo graphql it give me all I need. but for Shopify apps, the admin embed login is write for Koa and super easy to use so I prefers nuxt + koa when I develop this kind of app.
what means ssr?
server side rendering, the important thing is Rendering, that means nuxt (or nuxt + extra server-side framework) read the vue (js) code in the server and rendered them in Html code, after that it send the html to the client machine.
This is the reason why SEO is possible, when a web crawler visit the site it receive a fulfilled HTML page easy to read and clasify.
Nuxt has a really extensive and easy to understand guide, I recomend you follow them. Example you can use Head for edit the Header of the page,
I am new to Vue and I have already migrated a small application to it, but now I wanted to add routing in the front end level, so I started looking at vue-router.
My components use inline-template because they are placed inside templates of a django application. This way, the django ecosystem takes care of the localization and also offers more information to logged-in users.
I could not find a way to make my components work with vue-router. I even tested using x-templates and it just does not work unless the template is a string inside the JS code.
Is it possible for vue-router to use external file templates? If not, how does vue-router handle the situation where templates are generated by a backend server?
I eventually found how to make it work. The trick was to place the x-templates outside the root Vue app element. This way the root Vue app did not tried to render them and then they were rendered by their components.