How to add data attribute to html tag in vue.js

Question

My question is in the title. I want to add a data attribute to <html> in vue.js (v2). The auto generated code does not provide any hint to do so neither do the docs, as far as I see.

The desired result should look like:

<html data-foo="bar">
  <body>
    <div id="app">
      <!-- .. -->
    </div>
  </body>
</html>

Can someone tell me how to accomplish this?

well, just put it there in your markup, or in code ... vue doesn't touch anything outside the root element (the id=app in this case) how would you do it if you were not using vue? — Bravo
– Bravo, Commented Aug 19, 2021 at 10:03
Now I feel stupid. Thanks! In my case there is the /public/index.html which will be used to inject the vue.js code. — Andreas Sawatzki
– Andreas Sawatzki, Commented Aug 19, 2021 at 10:13

wittgenstein · Accepted Answer · 2021-08-19 11:11:34Z

2

I guess this will works:

document.documentElement.setAttribute('data-foo', 'bar')

ps: I use this line to change my theme from dark to light mode. I got this from this example.

answered Aug 19, 2021 at 11:11

wittgenstein

4,60011 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add data attribute to html tag in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related