Vue app - support in utils.js and kind of SPA

[deim31]

I'm trying to test SPA in Vue and there should be sections of page
loaded on click (e.g. from menu) - without reloading whole page. Parts
should not run (be loaded) at once.

1) I suppose dynamically loaded parts should be components since content
is structurally different
- but is there a way how to replace e.g. main DIV content with component
and init it?
- I can add @click function with
xxx.innerHTML="<my-component></my-component>"

2) There are very nice functions in utils.js
- some of them are used in Luca's examples like Q.register_vue_component
- There is very interesting function Q.app - is there some example with it?
- - Would it possible to solve SPA with dynamic components loading with it?

3) Should I expect any problems with Vue 3 with utils.js functions?

Many thanks for clearing my thoughts (or suggesting better approach :-) )
Shawn

[Val K]

Do you want full featured SPA? utils.js is intended to use Vue as a widget engine (as a replacement for JQuery). If want real SPA,  you need a lot more, than utils.js.  

Here is my playing around page-as-component concept that is mix of traditional and spa approaches

https://github.com/valq7711/py4web_on_vue

"xxx.innerHTML="<my-component></my-component>"  

- after a template was consumed by Vue, you can't modify it

суббота, 20 марта 2021 г. в 13:09:21 UTC+3, dei...@gmail.com:

[Jim Steil]

A real SPA with Vue is something in and of itself and I wouldn't plan on using any py4web rendering tools.  py4web is just your backend server in that instance.  Well, maybe on the main page/frame I'd use py4web rendering tools, but that is it. 

Other than that, py4web should just be returning json to the SPA.

When you say 'component', are you talking about a py4web 'loaded' component or a Vue component?

If you're still trying to use py4web-rendered html, maybe something like htmx would do the trick.  htmx returns rendered html to the page fetch vs Vue wanting json.

https://htmx.org/

-Jim

[Massimo]

My plan was to eventually ship utils.js separately from py4web as its functionalities are more general.

There are some functions in there which are Vue specific but very few and I am not sure they belong in there.

I am in favor of the extension you propose (1) if you can keep it simple.

I think the Vue functionality in utils.js and the component loading are orthogonal at this time.

I have not tried it with Vue 3 but I do not expect any problem.

[Val K]

"I am in favor of the extension you propose (1) if you can keep it simple.  "

it is simple - suppose we have  app data 

data:{

    current_active: 'some_preloaded_component_name'

}

and in the template:

<component :is = 'current_active'></component>

to change it to another component we need to somehow load  component definition and register it (e.g. using  Q.register_vue_component )

and then just set

app.current_active  = 'loaded_component_name'

суббота, 20 марта 2021 г. в 19:18:13 UTC+3, Massimo: