Style section not being applied to vue widget SFC

[JT3DAI]

Hi guys,

I have a vue widget and when I load in in my trame application it looks like the styling is being ignored. Is there a document that better explains how to do this properly.

As it stands, I have a template script and style section but as I said the style section is being ignored? Not sure why?

Thanks in advance

[jourdain]

Did you load the css of your bundle, if not what you are describing makes sense.

[JT3DAI]

ahh - I did not - thought it was automatically done!! So how is this done in a trame app?

[jourdain]

Where did you load your JS? What have you done so far? For me when I do it, I usually uncomment the line.

[JT3DAI]

So I do the following.

• I take my SFC .vue file that has template, script and style.
• I then compile that with npm run build. This creates my my.umd.js & style.css and putrs them in module/serve directory.
• I then import into my trame app using from my_ui.widgets import my_ui as my_widgets
• then I use like below but I didn't realise the style is not used for my MaskWidget?

                    my_widgets.MaskWidget(
                        imageUrl=("image_url",),              # 
                        click=(self.handle_click, "[$event]"),
                        mask=("mask_data",),                  # 
                        v_show="active_view == '2d'",
                    )

[alesgenova]

In the module/__init__.py file there should be a line which is commented by default:

styles = ["__package_name/styles.css"]

Un-comment it and the css file should be loaded

[JT3DAI]

Thanks will try this. Matter of interest why is it commented out by default?

[JT3DAI]

That worked - thanks guys

[jourdain]

Matter of interest why is it commented out by default?

Because the example widget does not have any style (css). So in order to prevent a fetch and a 404, we don't load it. But we provide it as reference so people can learn how to do it, if they need to.

It is meant to be educational so people can understand what is happening. But that require people to read the generated code rather than expect magic without any understanding.

My logic or assumption was:

• use cookie cutter
• create custom widget
• widget missing css
• grep for css in the code base
• find the commented line, understand what that module/init.py file is doing. Uncomment the line.
• move to the next thing...

[JT3DAI]

makes total sense Sebastien. I should have spotted the commented out line in init.py. appreciate the help