How to apply CSS to the root of a Vue 3 component?

Question

I am moving Vue 2 source over to Vue 3 (beta), and came across this:

<template>
  <section id="this">   <!-- how to eliminate this? -->
    <div>
      YOU ARE AT HOME 🏯
    </div>

    <h2>Hi <span>{{ uid }}</span></h2>

    <!-- List the projects we have access to -->
    <div id="grid-container-projects">
      <ProjectTile :project="null" />
      <ProjectTile v-for="p in projectsSorted" :key="p.key" :project="p" />
    </div>
  </section>
</template>

<style scoped>
  #this {
    text-align: center;
  }
  ...

The details don't matter. Applying the text-align: center to the #this node is what I'd like to achieve, but without the #this node.

Is this possible, or reasonable? :)

I tried the following:

<template>   <-- Vue 3 (beta) -->
  <div>
    YOU ARE AT HOME 🏯
  </div>
 ...
</template>

<style scoped>
  * { 
    text-align: center
  }
  ...

This does the wished layout, but causes a stack overflow in the browser. That may of course be just a Vue 3 betaism. (3.0.0-beta.4)

How would you proceed? Leave the section as is, or get rid of it, somehow?

Edouard Yonga · Accepted Answer · 2020-05-17 13:02:30Z

1

Personally, I will go with the section because there you add an id in the div tag to uniquely centralize that element.

while in the second option you will generally centralize all the component elements

answered May 17, 2020 at 13:02

Edouard Yonga

5175 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How to apply CSS to the root of a Vue 3 component?

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