I've been learning both Angular2 and VueJS just to see which I prefer, I can safely say I prefer VueJS just with its ease of use, its great documentation, its speed etc
I'm trying to do some API calls using Axios in Vue. These were going perfectly when using the JSON placeholder data from:
https://jsonplaceholder.typicode.com
I'm now trying to do more 'real world' example, the call I'm trying to do requires headers to be sent with the request.
I tried to add these, but of course how I've currently been calling them is from the Client Side part of the app (CORS blocks this).
With Angular2 I ran my app alongside Express, from Express I ran the calls which then passed the data to the view.
How would I best achieve the same result with Vue?
Edit: I've done some research and found NUXT.JS which seems to be SSR? However, I'm unsure how Nuxt helps me in this situation.
Thanks
Related
I am trying to figure out how to pass data between the theme-app-extension and the backend of the application that the theme-app-extension is connected to. The theme-app-extension is all liquid, css, and javascript so I wasn't sure if there was a built in way to pass data between the two. For example is there a suggested method to pull data into the theme-app-extension from the database and is there a suggested way to send data to the database from the code running the theme-app-extension? I am fairly new to doing anything with theme-app-extensions as well as building Shopify applications. I have built Shopify applications that was admin facing or just cosmetic, this is my first time building a Shopify application that takes user input and sends it to the database and retrieves that data for the end-user to see.
Any suggestions would be greatly appreciated.
Thank You.
I started working on Shopify App (Theme App Extension) a week ago
I run into the same problem, so I did consume API in a javascript file using Fetch
Here is an example of the code:
I add this into global.js file inside assets
And then I linked the script files inside my Liquid block
Also inside global.js, I did manipulate DOM by injecting data consumed from API, here is an example
Finally what I did is communicate directly with DOM to inject or retrieve data, then handle it using javascript
I hope this helps you
Ps:
This is my first experience with Shopify too, and I was quite disappointed (lack of resources, docs, and community)
You usually (always) pass data from the front-end to the back-end using an App Proxy. There really is no other way at this time. The Proxy gives you an XHR call you can use, and you can return Liquid or JSON. Your choice.
Developing a Windows Desktop application that uses Chromium Embedded Framework for the UI frontend, but I assume this would apply equally to Electron and similar platforms as well.
The application will have multiple pages, each implemented as its own component. In a traditional SPA this would typically be implemented using Vue Router, but I assume the main benefits of Vue Router are the ability to route to the appropriate resource based on URI, parse URI query parameters, and enable the forward and back buttons with history.
Since none of these really apply to my Desktop application, I am thinking that Vue Router will bring little to the table and just add more boilerplate noise to the codebase. If I'm missing something and there is a significant benefit in Vue Router for my use case, please let me know.
Side note: I do plan on using Vuex to allow the different page components to work on the same set of state data without a lot of tedious prop/event binding.
I would still opt for vue-router, since it provides a standardized way for in-app routing in Vue apps. It is not some sort of exotic dependency you are introducing.
If your app is growing and you need things like nested routes and dynamic routing, passing props to a route, having navigation guards like ‘beforeEach’, you can just use it, without creating your own solution or rework the app to use the router. Also, another vue developer immediately understands the app routing and so do you, if you have to change something in the app after a year not working on it. And it is all well documented.
And you are developing a desktop app, which makes a few kB more or less in the bundle not a concern, I would think.
Automatic active link CSS classes
HTML history with back/forward navigation support
Nested components
etc.
So I have my nuxt 2 app where I want to fetch company reviews from an API on a single page. The API does not allow requests from the browser/client so I need to use a server for this call.
So I was using asyncData() with if (process.server) but now I have the issue that the data is only being fetched on the initial page load of the specific page. So if I switch routes in my app to the page where the review data is loaded, I am getting an error, since the review data can only be loaded server side.
I think I have a little comprehension issue here on how to solve this issue. Is there a best practice on how I should fetch my review data in order to access it on this specific page even if this page was not loaded initially?
I am using static site generation for my nuxt app.
If you can have all of the data set at build time (full static mode), you could get it without any extra step.
Here, I guess that this is dynamic and you need more flexibility. So, there is no magic sauce here: you cannot have a server-side call made on each client-side navigation (like SSR Next.js does). Nuxt will stay isomorphic and be client-side only after the initial render (done on the server).
You could have a serverMiddleware into your Nuxt2 app but it's pretty tricky overall and not really worth the effort IMO: https://stackoverflow.com/a/72102209/8816585
(quite easier with Nuxt3)
Solution: use an external server middleware (could be an edge/serverless function) to fetch the private data and send it back to Nuxt.
I'm a bit of a noob to the 'backend' part of Nuxt. But I'm trying to learn. I've set up a bot that's linked with Twitch. Their server sends a post to my own environment whenever someone follows or subscribes to a channel. I catch and handle this post with Express and would like to show that event on my Nuxt frontend. Unfortunately, I've yet to figure out how to get that data from the express server middleware to Nuxt whenever it comes in from Twitch. I've tried to find examples on the web, but haven't come across anything that seems to do this... Or I'm just too much of a noob to identify them as solutions.
I figured I'd use something like a WebSocket (Socket.io) to do this, however when instantiating the Express post handler I don't have access to Nuxt. And if I try it after I hand Nuxt to Express with (app.use(nuxt.render)) the post no longer gets passed through.
I also tried to add a store or adding a property to the Nuxt object itself, but again, I'd need Nuxt and the latter wouldn't give me the automatic pushing of data I'm looking for (hence the WebSocket idea).
Currently, the project is set up with a server/index.js where express is handed Nuxt to run the bot. I also have a WebSocket being initialised there. For now, I also handle the post-call there since I thought I'd at least be 'close' to the elements I need (Nuxt / Express) but I just don't see the way forward.
Any tips in the right direction would be much appreciated. If I need to add code to this post I can, at this point though I'm not sure what would help give this question a good answer.
Thanks in advance.
I want to get my data from server in the component where the data is needed.
(call api at mounted or beforemounted or created (component lifecycle loop))
If I followed the rule above, it is inevitable to call same multiple REST api at same page.
I tried to cache them but it is quite difficult to handle the REST api result.
( Because the result of REST api depends on to params and it also depends on to time....)
I know that nuxt provide fetch and async but getting all data at page level looks bad.
Is there any good strategy for call api efficiently? I think this kinds of concern is not restricted to nuxt or vue, it also happens in react, angualr like component based framework...
If you want an SSR page than you can make API requests in the asyncData method inside pages or if you want to make API requests on client-side than you can go for mounted method.
And for state management/managing data in component/across component can be achieved via VueX
You can use nuxtServerInit to store in vuex
Check out the documentation