Single Product in Nuxt page in nuxt - javascript

I am new to Nuxt and trying to make a Single Product. I wonder:
How is it possible to generate multiple pages in SSR and can create a new HTML for each page? Is CSR should be created first and then the SSR made or vice versa?
If Vuex is used and a method dispatched in async Data is it possible to get data in computed? I mean is HTML generated dynamically if we get data in computed session? how should I use Vuex and be sure that every product certainly has its own HTML page?
Thank you

All pages created are generated SSR by default if the mode is set to SSR or Universal. First, files will be generated from the server and then injected into the client-side. You can avoid SSR in specific sections using the client-only tag. Nuxt pages Nuxt SSR Q: Why should I use client-only? A: Because it's possible when you use some dependencies, it returns undefined so we use client-only to render it on the client side and avoid this problem.
It is possible to use asyncData's value in components computed property. You're looking for dynamic routes (pages). You can access the information inside this using $route.

Related

How use simple VueJS component in Laravel project with VaniiliaJS

I have a Laravel (9) project but I don't use Inertia (or anything else). I use just VanilliaJS and webpack (mix) and render it with "simple" blade files.
BUT I want to use VueJS (3) only when I need it in some pages (as a component form that I want to reuse in several places).
As VueJS uses a virtual DOM and the component is rendered only on one page, the vanilliaJS that I use (also) on this page does not work anymore as it is bind on the "real" DOM.
So my question is how to use vuejs as a simple component and still use VanilliaJS on the same blade page?

Export Vue dynamic site to Static HTML on run time

I am trying to generate/export the html/css from a Vue Application to a static index.html and the css assets without the script I wrote within the vue app which makes calls to the internal servers.
Use case:
An employee creates a digital Information site about a car of the company.
Here he needs to enter vehiclenumber etc, it then makes a GraphQL query with these parameters to our internal server.
Once the information loaded and is filled in on the site, an option should be given to "Save" (Export) the html/css with only the necessary js for vue components itself to work (e.g. Element vue gallery)
The Employee creates the page using localhost:8080?carnumber=xxx&info=xxx
The Server queries itself should not be included as they will be unreachable from outside the intranet.
So I want the static html to not care about the route and parameters and display the HTML as seen on localhost:8080?carnumber=xxx&info=xxx
I have looked for "static site generators" etc but I have not come across a result I am looking for as the page itself isn't static only the export should be. I also came across Nuxt.js but not exactly how I want it to be, the best would be to have it call like a NuxtGenerateStaticPage(this) function (in my dreams)
Please let me know if anything is unclear.
I appreciate any input/idea :)

NextJS - how to dynamically load different apps with dynamic routes

I have a multi-lingual application that I use exportPathMap but I want to transition to getStaticProps and getStaticPaths. My structure looks like so:
pages/[language]/[app-slug].js
However, [app-slug].js could be any of 20 different applications with unrelated code...
After reading caveats I thought, with pre-defining the getStaticPaths, I would be able to do:
-[language]
--[app1].js
--[app2].js
...
But it throws You cannot use different slug names for the same dynamic path ('app1' !== 'app2')
Is there any way to dynamically load the react app code based on path, or to have multiple dynamic files in one repo? (all static paths are known)
This similar answer to use query values won't work for my case, SEO and bundle size are top priorities.

routes from backend API for content management in angular 2

An Angular 2 app uses the following code to load an array of routes:
export const routing = RouterModule.forRoot(myRoutes);
Currently, the myRoutes array is defined in the Angular 2 app, and works perfectly. But this assumes that routes have been defined statically in the client app.
How can the myRoutes array be fed into RouterModule.forRoot(myRoutes) from a source that would allow users do define routes and content from a user interface in a separate administration app? This would involve feeding the user-defined routes through a backend server.
I figured out how to send a data argument into each Route object in the myRoutes array, so that the same component can be re-used for multiple routes by sending different config into the same component from each route. But how can the routes array be imported from an external data store in a backend server?
This link indicates that I am describing a feature request. However, There MUST be some way to have UI-based content management in Angular 2 without having to resort to third party tools. What is a minimalist approach to importing an array of routes into RouterModule.forRoot(myRoutes) from a backend server?
You could try using dynamic component loading. The docs for it are here: https://angular.io/guide/dynamic-component-loader
I have not tried it ... but it does not look like it does exactly what you want. It does not seem to provide a way to add dynamic routes. But it does allow adding dynamic components.
Also, as per the link you defined, this is an issue with the CLI and its dependence on Web pack and AOT. You may be able to achieve more of what you want using SystemJS as your module loader.

How to reuse router object on another html page in Backbone JS?

I am fairly new to Backbone JS and still figuring out its nuances.
I have created a router class in main.js which is included in index.html. Also, I have created an object of that router class associated to same html page.
Now, if I redirect to next html page all the created objects get lost. Even if I associate it to window object, it also get lost on a page redirect.
So, my question is how do I reuse my router object on next html page without storing it in sessionStorage or localStorage?
Should I always include the router js file on each html page and create a new object every time? Is there any other way to achieve what I am trying to do? Please enlighten me.
Backbone.js is primarily designed to create SPAs (single Page Applications) especially the routing which is based on the hash change events by default.
For some reason if you must have actual redirection between HTML pages, then considered each as separate applications, i.e both should load the libraries, setup their own backbone components etc. Data can be shared between them using client side solutions like localStorage or REST API.

Categories