Using Single-File-Components from .vue-files

[MagneticX]

Dear Trame-Community,

from #199 (reply in thread) I learned that Components from .vue-files can also be used with trame.
Is there any basic example for this; I'm unable to finde any futher information on this topic, than in the link above?

There are many examples on https://vuejs.org/guide/essentials/component-basics.html#Dynamic-Components how to
write SRCs, but how to proceed with trame after doing so?

I know, that any JS-Script-Function can also be written with trame/python, but that code would (for my understanding) always run on the server, while (I guess so) the JS-Code from the vue-Component would run on the client, does it?

[jourdain]

You can start with the trame cookiecutter while picking the "component" option. That will generate both the JS project and the Python side. The JS code in the cookiecutter will be pure JS to work in both vue2 and vue3. But if you are fine to limit yourself to only 1 vue version, you can replace the JS file by a .vue.

You can see a usage of those widgets in any repo Kitware/trame-*.

HTH

[jourdain]

Side note, if you write any JS-Script-Function, it will still execute on the client. Even creating a pure Python component, will execute on the client side letting vue compile and run it for you.

[alesgenova]

You can see an example of a trame library created using the cookiecutter ("component" option) here: trame-alerts.

In this library all the custom vue components are implemented as SFC using typescript (which required further tweaks to the build system straight out of the cookiecutter).
For example here is the vue file of one of the components, and here is the corresponding python definition

[MagneticX]

Dear Sebastien, dear Alessandro

thanks for your reply, but cookiecutter seems not be a solution for me.
I read the readthedocs of cookiecutter, but for me, it raised even more questions and I'm not sure what
I will gain from it.

I started programming webapps with trame and vuetify and got along with this pretty fast.
This was possible, because trame and vue are logical, very well documented and with lots of examples,
I learned from.

My idea to use .vue or JS is just to add some more functions to (sets of) components.

Let me give an example:
In my first steps I coded a text-Field for putting in a password, just to gain some practise.
I checked the length of the text evey time a key was pressed with a python-function, that worked well, but
the server was called every time a key was pressed.

I know, that this is better done using the "rules"-section of the text-field, but this example is most
simple to explain what I want to do: I want to call simple check-functions (many times), running on the client,
every time a key/Button/whatever is pressed.

At first, I tried to make this work by using a template with an additional "script"-section:

Col_child= """ <script type="text/javascript"> export function This_fun(){ document.getElementById("RLabel").value = "The function is triggered!"; } </script> <v-btn prepend-icon="$vuetify" @click="This_fun()">Call JS-Fkt</v-btn> <p> <div id = "RLabel"> "No Result now..."</div> </p> """

and added this in my trame-code with:
...
with vue.VCol() as Col: Col.add_child(Col_child)

I made different attempts to get this running, but it seems to me, that the script-section
is ignored; but maybe there is just something still wrong with my code(?).

In the best case, clicking on the Button lead to a message in the console:
"JS Error => TypeError: This_fun is not a function"

I'm not really interested in .vue-files, all I want to achieve, is to run simple support-functions,
written in Python or JS on the client, I asked about them, because they seemed to be the most
easy way to add some additional code to the component.

cookiecutter may be a great project, but for me, it is more efficient to spend my time learing JS
and increasing my skills with trame.
Some examples how to run JS-snippets like to one above in trame would be great!

Thanks a lot and best regards, MagX

[jourdain]

You can not add a script tag like that, you need to use the one that come with trame so it can properly be loaded.

The point of cookiecutter is to create some JS components and make them availble from Python so they can be seamlessly instantiated from Python.

If you want plain JS from Python you can follow that example.

[jourdain]

You can see an example of the script tag here

[MagneticX]

Thank you for the example Sebastien, I now see how it is done with JS.

There is one other thing; you said:
"Even creating a pure Python component, will execute on the client side letting vue compile and run it for you."
I'm not an english native speaker and maybe I don't get, what you mean with that.
Vuetify is for my understanding not able to run or compile python-code(?)

The only way I see is to write a class that inherits from an vue-component, like:

class PW_Field(vue.VTextField): def __init__(self, **kwargs): super().__init__(**kwargs) self.My_own_Vars = ... def Added_Functions(self,...) ...
but I was not succesful doint so. So how can a python-function be sourced out to the client?
As far as I understand Trame, just needed controls and JS-code is running on the client; Trame does not
translate python-code to JS, neighter does it run a python-interpreter on the client(?)

[jourdain]

trame just send the vue template to the client and the client will do the understanding and compilation of the template to proper JS code.

You can find an example of class inheritance in Python here