How would I add CSS styling to the current Vue.js template?

Question

I have started learning Vue.js and so far, I understand that that styling child components can be done by referring to the classes, ids and tags defined in the component's template. Take the following App.vue component as an example:

<style lang="css" scoped>
    .app__wrapper {
        width: 90vmin;
        height: 90vmin;
        border-radius: 20px;
        background-color: #eee;
    }
</style>

<template>
    <MainHeader class="app__header" />
    <ContentWrapper class="app__content-wrapper" />
    <MainFooter class="app__footer" />
</template>

How would I go about adding styles to the App component itself? I tried the following two ways I could think of, but they didn't seem to work:

<!-- App.vue -->

<style lang="css" scoped>
    App {
        background-color: #ccc;
    }

    .page__app {
        background-color: #ccc;
    }
</style>

I tried searching other questions on StackOverflow, but only found questions about other web frameworks.

Thanks in advance :) Have a wonderful week!

Answer 1

App.vue is typically your root component that your Vue instance mounts to via app.mount(#app) (typical of all default Vue installs). So you can consider <div id="app"> to be your root element, this is the element you actually want to target.

The thing about <style> is that when scoped it can only affect CSS belonging to elements of the current component only. If not scoped, the styling will be applied globally.

Using all of the above information, you can target <div id="app"> using an unscoped style in your App.vue

<style>
#app {
  width: 100%;
  height: 100vh;
  ...
}
</style>

App.vue being your root component is usually the best place to apply global unscoped CSS like this. It's usually best to keep other component styles scoped unless you have a good reason not to.