Can I use an SSG tool for Vue.js, like Nuxt, to generate a single-page application using Vuetify and have its data-table component (instantiated with v-data-table) work, i.e. be able to display tabular data loaded as JSON (via a totally separate REST API, nowhere near Vue.js), enable editing its rows and having script handlers make REST calls in response to edit events which data-table provides? If so, what steps does that involve?
Or am I confused about the requirements, e.g. the meaning of static? (I understand it as content, i.e. HTML mostly, being ready on the server and send in response to requests, as opposed to generated on the fly. But maybe the in Vue.js it means something different.)
Related
I'm currently wondering about the difference between static and dynamic pages when using vue.js.
Are vue.js pages static or dynamic?
They can change on user interactions but not necessarily need to interact with the server to change data, when not using axios or alike. So does it still count as static just changing the frontend itself on input or interactions?
Little confused about this. Hope for good explanations.
A static page is a page delivered to the user exactly as stored and with no chance on being changed, end of story!
Although dynamic pages can take 2 types: Client-side dynamic web page and a Server-side dynamic web page.
Client-side dynamic page is changed without server requests. For example, when you click a button and something pops on the screen, or some content on the page changes, etc... (i think you take the idea).
Server-side dynamic page is changed with server requests, as you said for example, with HTTP requests using Axios.
And this is not the Vue.js definition, is the default definition for static and dynamic pages.
Currently, I'm making two round trips to my server. The first trip is to send the html file to my client via res.sendFile(). Once that html file is loaded in the client, I need to fetch the data for that page, so I have to make a second request to the server (sometimes using an IIFE to get the data immediately on page load), where I send the data back via res.send() or res.json().
From what I've read, it's not possible to do all of this in one step, so are two round trips to the server the best way (or only way) to render an html file and its data in the client?
The only other option I know of is to use a templating engine like Handlebars or EJS, but I don't think either one can handle the complex logic I need in the client. I tried Handlebars once, and the client logic was a mess.
If you need to fill your HTML page with dynamic data there are no other options to use a template engine if you want just one trip to your server.
For me using PUG template engine (formerly Jade) was good enough.
We plan to create a Shopify app but we face some problems to find in documentations how to interact with pages.
I`m not sure we must ask every time users to add codes and etc, so I need to know if I miss something.
I need to interact with the product pages in Shopify from an app.
I search and read all the web for this and everything is how to start but not the actual examples.
I know for the ScriptTags and how to include them but that is.
If someone can give me a simple example of how for example to hide the Buy button and insert something on instead.
I know how to select it with the default theme with JQuery but what about all other themes?
There are two ways to interact with the front page:
1) Inject some code in the page ( the live one )
2) Use ScriptTag as you mentioned.
The code injection script will modify the product template for example and inject your code if you like to do this automatically or you can instruct the user to do so on their own, but if they are not code savvy there might be issues.
In addition this code will live only on the live theme in most cases. And if the user likes to delete your app at a specific time you must be sure to write the logic in such way that it won't affect the site if your app is no longer present ( since it will be really hard to clean up the files once you add the code automatically )
For this approach you will need to use the Asset API.
You will need to get the content of the file with a GET request to the file and make a put request in order to update it.
The better approach is to use ScriptTag API.
This will allow the use of a script file that will be attached on EVERY theme. This will not modify the theme files in any form or shape.
It seems that this is the approach that you are looking for.
Please have in mind that you will be the one hosting the file from your app so pretty much you can write what ever you like there. So if you like to use jQuery you must be sure that the themes have included jQuery or you will have to add the jQuery core code inside your script.
As for how to write a script tag, there is a pretty straightforward documentation here: https://help.shopify.com/en/api/reference/online-store/scripttag#create-2020-01
I have a vue3-app that serves as the frontend of an asp.net core 2 api.
Much of the requested data gets used by multiple components. And in order not to make multiple identical requests, i want to store the response-data in my vuex-store if it's not in there already.
The problem is, that most of that data changes a lot, so i need to be able to tell vuex to refresh the data after some time.
But i don't want to refresh all of the requested data, since some of it doesn't need to be refreshed as often and some not at all (for example a list of countries).
So what I need is a way to tell vuex wheter i want to save the response of a specific axios request forever, or to re-request it after a set amount of time.
My questions are: Is there a plugin for this that I couldn't find? And if not, how could i implement the described functionality without rewriting it for every request?
There are some axios cache projects available:
axios-extensions (LRUCache)
axios-cache-adapter (localforage)
cachios (node-cache)
The 2 most popular currently are axios-extensions and axios-cache-adapter
Source of the chart
There is a library axios-cache-adapter that is a plugin for axios, to allow caching responses.
It is a great solution for implementing caching layer that takes care of validating cache outside of application's data storage logic and leverages it to requets library instead.
It can be used with both localstorage and indexedDB (via localforage library)
I would like to retrieve HTML content from DNN through the API for an entire page for an anonymous or authenticated user. This content will include all the content for the page, including menu items, etc.
To illustrate what I'm trying to accomplish, I can fake this by instantiating a browser and navigating to the page, harvesting the HTML from the browser. However, I would like to retrieve this from the API directly to improve the performance. Also, I would like to do this all in the context of the user.
Thanks for any help.
--Mark
Given the way that DNN pieces together the content on a module-by-module basis, within each pane. And the fact that the skin is a separate piece and it has individual skin objects that render object-by-object.
There is not an API that will do this. ALl of this logic, to a certain point is contained within default.aspx, but you would be seriously reinventing the wheel trying to do this.
If you need the full HTML, with all skin elements etc. The fastest way is to use an HttpWebRequest to make the call. It is super fast, and would be far more stable version to version.