How to get VueJS modifiers with PUG

Question

How can we get modifiers with Pug?

I tried the following:

my-component(:options.sync="addresses")

my-component(':options.sync'="addresses")

Both of these give a syntax error, unexpected token.

my-component(:options="addresses")

Gets compiled but of course misses the modifier in the final HTML.

If that cannot be achieved with pug, is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?

Answer 1

To answer this part of your question you can output raw HTML with either the pipe or period characters at the end of your element.

...is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?

With the pipe at the start of a line you will get the raw output for that line. For example this will render the exact string after the pipe:

| <div>
|   <a href='https://example.com'>Link to site</a>
| </div>

The period is used after a block to output all child elements as raw text. This would output the same HTML as the code block above:

div.
  <a href='https://example.com'>Link to site</a>